Express Application Architecture, templating engine or isolated API - node.js

I have built a Rest-API with Express and mongoose, now it's time to connect it to a Frontend and I am bit confused, I have started building the Frontend of the app with hbs as the templating engine and that works well but I was also considering React for example and that brings me to my question.
What is the best solution here? to build the whole App in one folder so to speak, with a templating engine taking care of the Frontend or to create the API, host it and then use it with a Frontend application? It is a matter of preference or one is better than the other?

This really is a matter of preference. There are many benefits and trade-offs for each method. Here are some:
API with Single-Page Application
Benefits
Easier to make a more dynamic app
With an API you can allow third-parties to integrate with your app easily
Fast - after the app has been initially downloaded only data needs to be transferred!
API and frontend separation can help keep business logic in one place (on the backend)
Offline and caching are easy!
Downsides
SEO isn't as easy (but still very much possible)
Slow - if your app is big, the initial download speed can be slow (there are lots of solutions for this)
Multi-Page Application
Benefits
Fast (page download can be faster)
SEO is slightly easier
More secure by default (due to cross-site scripting on SPAs)
Downsides
Slow - unlike a SPA, you have to download every page
Harder to build and debug
This is by no means a comprehensive list of trade-offs but hopefully, it will help you make an informed decision. Personally, I prefer the SPA approach because I have multiple sites/apps using one backend as well as the ease of development.

Related

How to choose the best tech stack for an application

I wanted to start a full stack project, with all the tech stacks in the market i am confused to which one should i pick. I know reactjs in frontend, nodejs and a little bit of django in backend.
First should i use Reactjs or any other frontend framework which is a single page application so all the JS code will execute from frontend or should i use that or Nextjs which does the server side rendering so in the browser we reduce the execution of js. If i stick with Nextjs then suppose i wanted to create a mobile app for my project can i use the nextjs for that or should i shift the code entirely
2)Does backend language really matter, if matters which language should i use and If it doesn’t matter then in nodejs which server framework should i pick(ex: expressjs)
Should I go with server or serverless while creating the api then it does not matter with the framework(because lately I have seen many realtime apps backend code is entirely wrriten by serverless functions using cloud)
4)tell me some of the important things i should use in a realtime app like docker, Kubernetes, load balancer, and any other things you might think this should be present in the full stack app
if you know any blogs or articles about choosing the architecture for ur project comment down.
This is a very opinion and experience based question that cannot be answered as you are asking it (and is technically out of scope in stackoverflow). I will try to help as much as possible anyway.
In general many different stacks are viable and in order to be productive it is more important that you are experienced in what you decide to use. This is because most technologies have pitfalls that can only be avoided by knowing them / experience.
Besides the frontend technologies/frameworks you listed there are many others. Having some experience with React-Native as well, my personal current favorites would be Angular and Flutter (both Google technologies) for web/apps.
It does and it doesn't matter. Without knowing your specific requirements no recommendation can be given though. As a general hint I recommend to use a language that your developers love - There is usually a reason for it. See the 2021 Stackoverflow Developer Survey.
Server vs. Serverless is mostly a business decision and you have to model your costs including hosting / development / maintenance efforts vs. usage models. Another aspect in this decision is time-to-market pressure since Serverless may be a bit faster to finish in some scenarios.
This cannot be answered without knowing the details and requirements of your project. Recommendations could be from hosting a static single web page in a S3 bucket to running your own fleet of (cloud-)-bare-metal clusters or buying a supercomputer.

Node Project & Practice

I am learning Node JS. It had almost learnt 70%. I am very interested in Backend Development but I'm not interested in Frontend development. My question is how do I practice my Node Skills. I only know HTML, CSS in Frontend. How can I make projects in Node JS without knowing Frontend? Or do I need to learn frontend frameworks such as React too to make projects.
You can build an API and use postman to make requests. Start with something simple and keep improving by refactoring your code.
You can work on the API creation part but in my opinion, you must learn one frontend framework it will not only increase your skill sets but also help you to coordinate with frontend easily and take more advantage of it than the projects you will build will be more useful and advanced as well.
You could also focus on implementing some algorithms and data structures starting of with simple ones such as LinkedLists, ArrayLists, sorting algorithms and then move on to (binary) trees and graphs.
These will be required for any programming language to solve (complex) problems and there are many books and internet resources for this. Just search for algorithms and data structures and you'll get plenty. You don't need more than a console application with some simple console.log() statements to implement algorithms - no need for fancy UI.
Last but not least, you should certainly have a look at TypeScript if you want to develop more complex backend applications.
If you really want to do Web Development though it is certainly helpful to have a basic understanding of frontend development or know the basics of common frameworks such as React, Vue, Angular or Svelte.
As others have mentioned for API development you could also just use Postman to send requests.

Approach for Web App development

I have decided on a stack for a web app project. Its as follows.
Express JS + Knex + postgresql backend as a Web API layer.
VUE JS as the front end.
I have completed rough design of the whole system. I am stuck with the implementation part. Do I build the UI first and flesh out the API, or vice versa.
Usually you build both at the same time - preferably by two different teams to minimize tight coupling and leaky abstractions. Sometimes the API is build first and then the web or mobile or some other frontends are built for that. Sometimes a frontend is build first as if the API already existed and it results in a solid specification for the API to get built later. Sometimes the specification is created first and then both backend and frontend(s) are built to follow the spec. It all depends on the specific work style and requirements. It's more important how you to it than when.
I'm working alone on a personal project and my approach have been to work only at the frontend then mock the http part with a realistic mock that emulates a real api behaviour and only at the end moving at the api development.
I decided to use this apporach because in my experience no matter how the model and functional specifications are clear, they will always be subject to change request and you can prevent the side effects on your development workflow by testing and interacting with the actual UI.
Then you will find that the api developemnt will be completed in a matter of weeks not months with a better clear understanding of what are your (or your client's) needs.
Hope this could help you

Isomorphism in an SPA consuming a REST service

I'm currently in the planning stages of a new project which is composed of a storefront, a highly reactive user dashboard, and the individual products being offered via the storefront being highly interactive mini-apps. We're trying to get away with making the entire platform a SPA and design the entire thing on a Flux architecture with React for the front-end views.
One issue, as with most SPAs, is SEO. I've prototyped an isomorphic solution based on the este.js dev stack. One issue is that our app consumes pretty much all of its data from a RESTful server, which is separate from the web server serving up the SPA. This means that the web server would need to fetch a considerable amount of data from the RESTful server, to isomorphically generate the HTML snapshot.
I've considered having a separate crawler process of my own crawl the entire storefront periodically and isomorphically generate HTML snapshots of the pages that could be served up when the web server encounters a search engine crawler. I'm not sure if this is a good approach though, as it would likely introduce additional maintenance and, frankly, seems a bit fragile. I could just have the web server isomorphically generate the HTML on the fly, but I fear bogging the server down for ordinary users as the server would be pulling considerable data from the REST API...
Is there a better way to handle such a case?
Check out Yahoo's Fetchr, an open-source library that allows you to isomorphically hit your API. It ties into Facebook's Flux architecture, so you need to have Stores, but at the very least you can glean some code and concepts from it. If you're in the planning phase, you might even consider going with the Flux or Fluxible.
http://fluxible.io/guides/data-services.html
https://github.com/yahoo/fetchr

Node.js Express for REST? Are there controllers in Express?

I'm currently developing a community (like a lightweight "social network") for a limited (local) target.
This is the first project where SEO doesn't matter and where I can happily exclude no-js users. That's why I'm thinking to start the project over and write my first site that is completely build with Javascript and my first Node application for educational reasons.
Details so far:
Browser: jQuery, maybe JavaScriptMVC (there are some things I don't like about JavaScriptMVC (like the routes), maybe I write my own little MVC or do you know a better suited framework?)
Server: Node.JS, Express framework, (maybe socket.io or nowjs for further features)
I got a few questions so far. I know it's better to ask a single question but there are more or less connected:
Express looks really nice but I'm missing MVC. I couldn't find any project that implements mvc and is build on Express. Is there a reason for that? Routing is nice in Express but I need a way to spread code across multiple files (controllers would be the best way I guess, the application won't be small and I need it maintainable)
The application will be more or less completely based on AJAX (json) requests. Is Express the right framework for such applications, anyway? I think the best way to write this project is to expose a json REST api which can then be queried by the web application over AJAX and by a mobile device app (which I'm also going to write). In my opinion Express' route system is quite suited for REST. But feel free to recommend other frameworks.
Have you seen Swagger? An API server available in Node.js with an automated UI Generator.
(source: wordnik.com)
To answer your primary question, yes there are controllers in Express. They are more akin to Sinatra (express is modeled after Sinatra rather than Rails). By that I mean they are light-weight method mappings to routes you define.
Browser: jQuery, maybe JavaScriptMVC (there are some things I don't
like about JavaScriptMVC (like the routes), maybe I write my own
little MVC or do you know a better suited framework?
I'd go with spine.js or backbone.js personally.
Express looks really nice but I'm missing MVC. I couldn't find any
project that implements mvc and is build on Express. Is there a reason
for that? Routing is nice in Express but I need a way to spread code
across multiple files (controllers would be the best way I guess, the
application won't be small and I need it maintainable)
You can spread files out all you want. I answered this here.
The application will be more or less completely based on AJAX (json)
requests. Is Express the right framework for such applications,
anyway? I think the best way to write this project is to expose a json
REST api which can then be queried by the web application over AJAX
and by a mobile device app (which I'm also going to write). In my
opinion Express' route system is quite suited for REST. But feel free
to recommend other frameworks.
I haven't built a 1 page app yet in node but from what I can tell, almost everyone seems to be using socket.io with backbone. That's not to say you can't, just that you'll find more examples that way.
You could check out Sails. Its structure is based on Rails.

Resources