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 . file and import grandjs as the following index js {Server, Router, View} = ( ); const 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 {View} = ( ); Body = { ( <h1>This is Grandjs JSX Body</h1> )
} .exports = Body const require "grandjs/lib" const => () return < > div </ > div module 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 {View} = ( ); Body = View.importJsx( ); Home = { ( <header>
         <title>Grandjs Home Page</title>
       </header> <body>
         <h1>{props.message}</h1>
         <Body/>
       </body> )
} .exports = Home; const require "grandjs/lib" const "./Body.jsx" const ( ) => props return < > html </ > html module 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: {Server, Router, View} = ( ); View.settings.set( , ) const require "grandjs/lib" //set the path of the jsx folder "views" "./views" inside index.js file we will build our server and routes as the following: {Server, Router, View} = ( ); View.settings.set( , ) Home = View.importJsx( ); { (options) { (options); .getRouters.push( .getHomePage())
  }
  getHomePage() { { : , : , : { res.status( ).render(Home, { : })
       }
    }
  }
} homeRouter = HomeRouter({ : }); homeRouter.build(); Server.setConfig({ : }); Server.initServer(); const require "grandjs/lib" //set the path of the jsx folder "views" "./views" const "./views/Home.jsx" class HomeRouter extends Router constructor super // push router this this return url "/" method "GET" handler ( ) => req, res // set status and render return 200 message "This message from render method" // instantiate home router const new base "/" // build the router to be ready for consuming // set the port port 3000 // init the server 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 ❤️

Super

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Grandjs Version 2 Is Here

Too Long; Didn't Read

Company Mentioned

tarek

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Grandjs Version 2 Is Here

Too Long; Didn't Read

Company Mentioned

tarek

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES