JavaScript Frameworks - javascript

Can someone enlighten me on web frameworks using nodejs? I recently started learning express js from free code camp and while it's all going good I'm confused as to what express entirely is. Is it a full stack framework? Is it purely for backend? I see that you can use different templating engines along with it.
I see things where people say you can use front end frameworks along with it. If express is able to already render views, what's the point of using a front end framework.
Also, what's the difference between express and something meteor, vuejs or react? There's just so many buzzwords out on the web that it's confusing.

Express is a back-end web server framework that runs in nodejs. It is purely for the back-end, though you can define routes/endpoints in it that any front-end can make ajax calls to.
You use Express to make the handling of web server requests and responses easier and fasster. It has support for things like:
Defining routes/urls/endpoints that you want to handle.
Serving static web pages.
Installing middleware for a wide variety of things including sessions and authentication.
Hooking into one of many template rendering engines.
Automatically parsing things like query parameters and form submissions.
Is it a full stack framework?
No. Express does not have a front-end component.
Is it purely for backend?
Yes.
Because Express has become so popular, there are also thousands of add-ins that can plug into express (often as middleware) for things like sessions or authentication.
Since it handles standard HTTP requests, you can use it with any front-end technology from just a plain browser to the many front-end frameworks.
Also, what's the difference between express and something meteor,
vuejs or react?
Express is a back-end framework (runs on the web server). vuejs and react are front-end libraries (run in the browser). Meteor is a full-stack framework. On the back-end, it runs on nodejs and the front-end component runs in the browser.
I see things where people say you can use front end frameworks along
with it. If express is able to already render views, what's the point
of using a front end framework.
Yes, Express can serve the web pages you view and it can use a server-side template engine to render them. But, there's potentially a lot more to a front-end framework than that. For example, express provides nothing to manage a user's interaction with a page in the browser or the building of dynamic web pages that change based on user interaction. If you're building web pages that create, read and update data from a database, then Express by itself provides no automation for doing that while other frameworks can offer a lot of help with that. You could build all that in your own JavaScript that would live in the web pages that Express was serving, but Express provides no help with that at all other than just delivering the JavaScript that you wrote on your own.
If you want to know more about what front-end frameworks do, then I'd suggest you read about frameworks like react, vuejs or angular to understand their value proposition. I'm not saying that you have to use a front-end framework (because you do not). There are zillions of sites on the web that consist of some sort of back-end framework and then plain JS/HTML web pages. Whether a front-end framework would benefit your development depends on what you're doing and how well it aligns with what a particular front-end framework offers.
Here are a couple good articles about what reactjs is:
ReactJS For Stupid People (fyi, I found it a very good article for smart people too).
What is React.js and Why I recommend it to other JavaScript Developers?
This article Full-Stack Frameworks contains a useful discussion of pre-built full-stack functionality such as Meteor vs. using a combination of technology such as MEAN (Mongo + Express + AngularJS + Node.js) or MERN (Mongo + Express + React + Node.js) and also touches on which technologies are more commonly used together.

Related

NextJS as a backend JS

I got confuse while searching top JS backend framework then I found NextJS is one of the top list, I thought nextjs is just a simplify of CRA and still need like nodejs as the backend. Back to my confusion, so when we normally create a full JS app we will need frontend and backend tech like (nodejs + reactjs) so with this nextjs we can make a app just with nextjs ? **sorry for my bad English
Simply said, NextJS is basically React on wheels and has NodeJS built-in. It has lots of other features built-in so you need almost zero-configuration to build a full-stack app.
If you have 10 minutes to spare, take a look at this video
Essentially NextJS is a full-stack framework. Which means that developers can write both front-end and back-end code in a single environment. It can provide multiple benefits among various use cases. Which can be things like seo optimization, image optimization or quickly switching between different rendering methods (SSR, CSR, ISR or SSG).
As for your question "Can we make an app just with nextjs ?", you certainly can but it depends heavily on what type your app is.

React with Server Side Rendering Stack

In the last few years, I’ve been working with an old fashioned stack, but pretty effective for my use case. The stack was Node + Express.js + Angular.js 1.x.
Basically, the backend made the rendering of the view (via dot.js or Handlebars, any template engine) and then, in the Frontend side, the Angular app was mounted.
The use case needed to be SEO friendly, so the content must be generated at the backend and served directly. Also, the UI has its functionality, forms, etc. It’s not just dummy text.
Currently for a new project with the same use case, I want to update my stack (using SSR aka server side rendering) where the app does not need to be a SPA (single web app). The base stack is still the same (Node + Express.js) and the only thing I want to update is the frontend library / framework.
I am looking for a framework / library with a big community and an easy way to share component and codebase across project. That’s why my first thought was React.
The first thing I found was Next.js and while I was reading and investigating, it goes beyond what I need. It is a quite big framework that has too much stuff I don’t need and I do not want to add overhead to my application and I cannot customize it as I desire.
I continue researching and I found an express package called "express-react-views" that is a template engine for express but it does not allow to mount the React application at the client side.
Browsing through the Github issues of the package, I found many people asking for these and they all end up being answered that Next.js was the way to go.
My doubts / concerns are the following:
Is React the right tool / library for this use case?
In case of not being, what do you recommend?
Being the right one, is there any package / tool on top of React and Express that helps me out with SSR that allows me the customization I need?
I don’t want to rely again in old or antique tools like jQuery or Angular.js 1.x because the maintenance and code sharing across projects is complex and annoying.
The easiest solution, without going deeply into Next.js, is using the native React feature ReactDOMServer:
https://reactjs.org/docs/react-dom-server.html#reference
It's actually pretty easy to use, you just serve the HTML as a string and mount your React App Client Side if you want then to handle requests with React Router.

Is it possible to make a single page application in express without react, angular, or the like?

Our entire codebase is built on just express, we want to build it out and in the process convert it to a single page application. As of now I am opposed to rewriting the code to work with a framework like Angular, or React, to accomplish this.
Thanks for reading.
Are you sure a SPA web application is what you really want to achieve?
If you are, then the answer is Yes: you don't need a framework for any SPA or any other frontend purposes.
A SPA usually consists of following parts:
Client side routing (eg HTML history mode)
Client side templating (see Smashing Magazine article for some examples)
Retrieving the data (eg via Fetch API or Axios
So, using these technologies, regardless of your backend technology, you can create a SPA with Vanilla JS. Actually, what you use at your backend has little to no affect on your SPA.
However, depending on how big your application is or how much features you need, you might end up using one. Frontend frameworks are designed to make your life easier.
If you are looking for a framework with an easy learning curve, I strongly suggest Vue.js. You can even get started without installing or transpiling anything locally.
yes, you can - depending on the complexity of your application you may end up transitioning to React, Angular, or another frontend framework in the future depending on your needs.
here are some resources:
https://tutorialzine.com/2015/02/single-page-app-without-a-framework
Todo in different frameworks (for comparison):
http://todomvc.com/
Angular vs Vue vs React:
https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176
If you're going for a real single page application you should be able to continue to use express. You'll find yourself jumping through some hoops though and using React/Angular would be a better approach because of how you could move forward with it in the future with no limitations.

Deploying a Symfony2 back-end REST API and a front-end SPA javascript app

Doing a one page application on one side and a REST API to get the ressources on the other side is something a lot companies do. I've been doing a pet project consisting on a REST API built with the Symfony2 framework and a SPA with Web Components and Polymer. The SPA is doing AJAX requests to get the ressources.
Now I'm wondering how to deploy it on the web. I don't have a lot of experience with deployment and I'd like to know if there are best practices to deploy a web app and where to do it.
I've looked at Heroku and the git push is very convenient but I don't know if (of how) I can push my 2 apps on the same dyno and handle the routing between the two.
Any idea on how to deploy such architecture?
You should look at using a deployment manager such as Capistrano. Symfony has it's own version which can be useful. Both a written in Ruby, whilst I like using Magallanes as it has most of the same functionality but is written in PHP so less dependencies and easier to modify.

Is node.js + express (back-end) + emberjs (client) a reasonable stack for my project?

To preface; I'm an experienced web developer, though I have barely used nodejs, and have not yet had the opportunity to work with emberjs (though I've done a decent amount of work with backbone).
I'm about to start a project to build a web based writing application (literature). In theory, the user would potentially have the application open for long periods of time, perhaps leaving it on. I intend to develop an expanding functionality set over time, which I would like to be able to drop into different places with relative ease. For example, perhaps develop a character list which I could then include in many places. I'm keen on using emberjs for the experimentation alone, but it also sounds like a good client side framework for the job.
I've looked at django briefly (haven't used it much before), but given that I'd like to use emberjs, it seems like django isn't a great choice as I'd be opting not to use many of its most compelling features.
Would writing my server side code in nodejs + express be a reasonable choice? The web application itself will have common features like login, admin, different permissions for users/tasks (eventually) - but I also anticipate some more beefy stuff.
This is a solution that works well for my team and I so far. While lacking express, Charcoal is a good starter project to get up and running with Ember without a Rails asset pipeline and Express can easily be added as middleware. In addition to using Express to serve your JSON, it can handle the minimal HTML needed for such requirements that Ember can't fulfill by itself such as SEO since content negotiation capability is very simple in Express.

Categories

Resources