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 or read this introduction
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
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
Viewclass 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
Viewclass 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.exportswhich 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 ❤️
Top comments (0)