1,643 reads

Grandjs Version 2 Is Here

by tarekApril 27th, 2020

Too Long; Didn't Read

Grandjs is the Promising nodejs framework that will turn the nodejs frameworks race! Version 2 is now fully rewritten in typescript with major updates in the performance and architecture, however, it stills exposes the same API. 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 building or compilation steps.

Company Mentioned

featured image - Grandjs Version 2 Is Here

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.

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.

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 building 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

npm i grandjs

Then create index.js file and import grandjs as the following

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

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

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:

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:

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

NPM Package here

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

L O A D I N G
. . . comments & more!

Grandjs Version 2 Is Here

Too Long; Didn't Read

Company Mentioned

Writing JSX in Grandjs Example

What is next in grandjs?

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES