Grandjs Version 2 Is Here
Tags: node, javascript, webdev, expressjs
Published: 2020-04-19 21:30:37

---
title: Grandjs Version 2 Is Here
published: true
description: talking about updates and new features in grandjs the promising nodejs framework
tags: nodejs, javascript, web development, expressjs
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/bynkihoi6dwvhkqutp3q.png
---
It's an awesome feeling to see something you have built one year ago gaining popularity and new people use it every new day!
Grandjs now has about 6k downloads on npm, thanks all ❤️

Grandjs Version 2 is here!! the Promising node js framework that will turn the nodejs frameworks race!

If you didn't hear about grandjs before, you can read the documentation of the project on GitHub from [here](https://github.com/tareksalem/grandjs) or read this [introduction](https://dev.to/tareksalem/getting-started-with-grandjs-4b3e)


What is new in grandjs ?

- Grandjs now had fully rewritten in typescript with major updates in the performance and architecture, however, it stills exposes the same API.
- Grandjs now is available for javascript or typescript applications
- Grandjs don't require any compilation step if you work with it in javascript
- Grandjs follows Object inheritance and oop in building routes which will be good to use the same routers for different uses without any problem (don't repeat yourself!)
- Grandjs now supports many different express js packages so you can use the same packages you used to use with express
- Grandjs is suitable for developing with typescript which enables you to write strong routing architecture!
- Grandjs exposes a new way for rendering dynamic HTML Markup using JSX syntax for server-side rendering, so instead of using template engine and search about helpers and methods, you can write jsx functional component and render them with grandjs without transpile or compilation steps, components are rendering on the fly!! Also, this happens without a need to react

- Grand now gives you the choice to use native parsers for request body and uploading files or use packages like body-parser and express-fileupload
- Also it supports many packages like cookie-parser, session, flash messages, morgan and many other, we are working now to make it compatible with all packages!

## Writing JSX in Grandjs Example

firstly install Grandjs by the following command
```cmd
npm i grandjs
```

Then create `index.js` file and import grandjs as the following
```javascript
const {Server, Router, View} = require("grandjs/lib");
```
As you can see, we imported Server to create the server, Router to extend and build our router and View which is a class responsible for building, rendering the JSX components

Then create a folder called `views` or any name you want and add these two components
- Home.jsx
- Body.jsx
In each JSX file, you have to require `View` class to tell grandjs to recognize that this is a JSX component and parse it correctly.

In Body.jsx I will write the following
```jsx
const {View} = require("grandjs/lib");
const Body = () => {
   return (
      <div>
        <h1>This is Grandjs JSX Body</h1>
      </div>
   )
}
module.exports = Body
```

**Note**
As you can see from the code above, there is some points you have to know
- import/require `View` class in each jsx file to tell grandjs that this is a component will be rendered
- The component should be a stateless function component return jsx syntax
- The Component should be exported using `module.exports` which is the commonjs export syntax


In Home.jsx file I will write the following
```jsx
const {View} = require("grandjs/lib");
const Body = View.importJsx("./Body.jsx");
const Home = (props) => {
   return (
     <html>
       <header>
         <title>Grandjs Home Page</title>
       </header>
       <body>
         <h1>{props.message}</h1>
         <Body/>
       </body>
     </html>
   )
}
module.exports = Home;
```

As you can see, we are writing normal functional component which can accept properties and data as a parameter, you can also note that we can import components inside another component file, this can be happen using a function in `View` object, this function called, `importJsx`.

Then in `index.js` file, we should set the folder path that our views will be exist inside as the following:

```javascript
const {Server, Router, View} = require("grandjs/lib");
//set the path of the jsx folder
View.settings.set("views", "./views")
```

inside `index.js` file we will build our server and routes as the following:

```javascript
const {Server, Router, View} = require("grandjs/lib");
//set the path of the jsx folder
View.settings.set("views", "./views")
const Home = View.importJsx("./views/Home.jsx");
class HomeRouter extends Router{
  constructor(options) {
     super(options);
     // push router
     this.getRouters.push(this.getHomePage())
  }
  getHomePage() {
    return {
       url: "/",
       method: "GET",
       handler: (req, res) => {
         // set status and render
         return res.status(200).render(Home, {message: "This message from render method"})
       }
    }
  }
}
// instantiate home router
const homeRouter = new HomeRouter({base: "/"});
// build the router to be ready for consuming
homeRouter.build();

// set the port
Server.setConfig({port: 3000});
// init the server
Server.initServer();
```

As you can see, it's a normal router, which includes one route on `/url` whith `GET` method.
Inside the handler of this router, we use a method called `res.render`, this method takes two parameters as the following:

- Component: This is the first parameter, which is the component you want to render
- Data: Object contains the dynamic data you want to pass to the component to be rendered in the HTML

Now Run your application and enjoy!!
Run command:
```
node index
```
Navigate to `localhost:3000`, and see the result!

## What is next in grandjs?

- We are now working to make the framework compatible with Deno which is the new vision about nodejs and javascript!
- Graphql support

Thanks guys for reading this article, and support ❤️

You can find the project on github [here](https://github.com/tareksalem/grandjs)

NPM Package [here](https://npmjs.com/grandjs)

I will be so happy if you want to contribute us ❤️