Category: Full Stack Development

MERN Stack

What is MERN Stack? Well, if you have been following this blog and going through the older posts, you’d know what it is already. It was all building up to get here. Finally, finished a full stack app with good logic.. Please do check the below github link attached at the bottom of the blog if you’re interested.

MERN is a combination of Javascript frameworks and a No SQL database.Which are, MongoDB as the database, ExpressJS and NodeJS as the backend and ReactJS as the frontend. Because of this you could easily create dynamic websites and web apps with very less refreshing times. As a person who got here after being doing websites with HTML/CSS/PHP its a great transition. It felt complicated at first. It looked as if even the tiniest logic requires a lot more work, but it’s not. If you had check previous posts you’d know when using NodeJS you could easily install different modules to make like recurring codes or complicated logic easier and also safer.

For my project i used the Bootstrap library for additional styling, but the things you could do with react is immense. For an example validating forms without submitting and actually fetching and check data from the Database without any page refreshes are added bonuses.

I’m still in the progress of learning more, hoping to fully understand MERN create more complicated apps to simplify problems.

Until then you can check my github repository below and leave your comments.

Train Reservation App, with dummy/test payment gateways

Node JS

Node JS
Photo by Fabian Grohs on Unsplash

I would consider this as the best thing that javascript could offer. Wait. But what is this best thing? What is nodeJS? and why all the hype?

Node.js is a JavaScript runtime environment, built on Chrome’s V8 engine. It could offer everything that you would need to execute a program developed with javascript.

Thanks to node.js, javascript doesn’t like a scripting language anymore, it is now capable of most of the features that a programming language could offer, and sometimes excels in it. I would like to highlight 2 of the most important things of node js, quoting directly from there official site.

• Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.
• Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

nodejs.org

What is non blocking I/O? I/O is input and output, which takes time no matter what language you use. With pure/vanilla javascript you normally have to wait for an I/O task to finish to start the next because it blocks the other tasks or functions, hence the name I/O Blocking. With javascript event loop this could be minimized a lot.

The package ecosystem, similar to maven, but npm has it’s own and considered to be largest. And this helps us to save time. We could actually focus on something thats high priority and use a package for something small which has been done a 100 times a year.

A list of favourite packages,

  • nodemon
  • mongoosejs
  • express-generator
  • mssql
  • material-ui
  • reactjs
  • bcrypt
  • passport
  • nodemailer

Reacting to React

React JS

React JS, made by the developers at Facebook, which is also used to develop Facebook. At first this looked like a mess, a highly complicated front-end framework. Setting states, passing props and code-able hooks. But once you get the hang of it you’d know how great of framework this is. Creating interactive UIs rendering only the required regions, this frameworks does all that.

Is it hard to set-up react? “It’s super easy barely an inconvenience” Even if it’s someone who hasn’t used react before if they simply follow the first few steps mentioned in the official website they can get react running in their workstation in few minutes. If you are just getting started I recommend that you check the official website as it covers from the react JS basics.

You can also find additional libraries and components if you need a headstart and theme your ui better or the way you handle the states. But also note that adding external libraries will minimize the amount you could customize.

  • Bootstrap
  • Material-UI
  • Semantic-UI
  • Redux

But for me, the thing about react is, it can dynamically change things around but still when connecting to the backend to fetch data from a database, the query would take sometime. So compared to setting states and props, querying is a bit slow. In order for it work in sync, we might have to use “promises”, but for some reason it didn’t do the job, so used time out with it. Which i was stuck for a long time not knowing how to move forward.

Edit : But thankfully internet has answers for everything.

https://stackoverflow.com/questions/56333979/react-how-to-sync-front-end-with-back-end-requests-without-using-settimeout