Becoming a Full Stack Developer with modern day frameworks

In the modern day application development, A full stack developer is not the one who just writes backend and front-end code for the application. A full stack developer is able to write the whole suite of the applications for the product. This includes writing code for Backend, Frontend, Android application and an iOS application. This can be seen to be the really daunting task for the developer to learn all the technologies required for coding the complete solution for the product. On the other hand, it adds to the cost of the companies trying to build a perfect solution for their product because they now need to maintain four teams instead of one, one each for Android application development, iOS application development, Backend development and the Frontend development. Managing the communication and getting each of the teams to might add to another level of complexity and more expenses on the team.

 

Javascript to the rescue

Traditionally, the above structure is how the Product development teams used to work. A product manager writes the product requirements for each of the flows and passes it to 4 different teams who work together to build the whole solution. The stack usually looked like as follows:

  1. PHP/Java/RoR or any of the popular web programming languages for the backend.
  2. Javascript or Javascript Framework like AngularJS, ReactJS, Vue JS, etc. for the front end.
  3. A designer for the front end who designs the website and converts it to HTML(These may well be 2 different people as well).
  4. A designer for the mobile apps who designs the mobile app screens.
  5. An Android application developer who knows Java and knows android app development with Android SDK.
  6. An iOS application developer who knows Objective C / Swift and has worked with iOS application development

You can see the time size and how difficult it can really be for a startup to afford such a tremendous team to build a simple MVP. However, javascript is rapidly changing this scenario. Javascript is re-positioning itself as a sort of a universal language which you can be used to develop and code all the parts of the solution and get the MVP up and run quickly. The underlying technology is scalable and stable enough to continue the MVP onto a serious product and carry it forward to evolved stages of product development.

Let’s delve deep into how javascript has eased onto each part of the above-said team and how an individual can learn javascript to their advantage and become a full stack developer.

 

Backend development with Javascript (NodeJS)

With the advent of NodeJS on the horizon, javascript lay its first foot as a language which can be used on the backend for server-side programming. NodeJS took full advantage of javascript features to provide an easy to use an event-driven framework which can work really well and lightning fast with the most modern age applications which interact on sockets and operate in real time.

Since then, NodeJS has come a long way and is stable and scalable enough to be used with production level applications. Some of the popular apps that use NodeJS in full or in parts include but not limited to PayPal, eBay, LinkedIn, etc.

So a person aspiring to become a full stack developer must have NodeJS handy in his skill toolset. They learn any one of the popular frameworks like Express, HAPI, Koa and get started in the world of backend programming with NodeJS.

Front End Development with Javascript (The Rise of application development frameworks like Angular/React/Vue etc.)

Javascript has always been used for the front-end development. Traditionally, javascript code was scattered across the different pages in the application, and it was very difficult to maintain as well as envision that how various javascript components interact with each other. The code was very difficult to unit test as well, and in the modern age of automated testing, it is very difficult to imagine a code which can’t be tested in an automated way.

There it becomes very imperative for an aspiring developer to learn at least one of the modern day development frameworks like Angular/ReactJS/Vue.

With that said, that’s not the only requirement. Javascript, in general, has been moving from the previous syntax to the new syntax and constructs known as ES6/7 standards. These constructs enhance javascript with new features and constructs that were not present in the original javascript specifications. All the browsers may not be supporting all the ES6/7 constructs, and hence you need the help of transpilers like Webpack, browserify etc. to convert ES6/7 into the legacy javascript that browsers understand. So let’s add this as well to the required learning set.

Here are some of the salient features of Angular and ReactJS to help you chose one:

Angular JS 2/4: Modern Angular versions(2/4) have default support for typescript(Microsoft’s typed javascript). You can work with AngularJS2/4 with ES6 as well however the support for Angular 2 on the web with ES6 code is quite limited in case you get stuck. So if you want to work on the front-end with Angular, you should add Typescript to your skill set.

ReactJS: React is a front-end development framework like AngularJS. It’s not a complete MVC like Angular but is a very lightweight competitor. ReactJS uses ES6 and JSX and extensively and one must familiarise themselves with ES6 and JSX if they want to do development with ReactJS

You can also research some other frameworks like Vue, but quite majority share in javascript front-end development is taken by AngularJS and ReactJS.

 

Mobile app development with Javascript(Android/iOS)

Javascript has been at the frontier of Mobile app development since long. It has come a long way since the mobile app development started and nowadays Mobile app development is quite advanced on top of javascript. Various options adopt different ways on how they build the stack to interact with the underlying operating system and have different implications for application speed size and look and feel. It’s up to the developer to choose which approach suits the best to their requirement.

Let us delve into the various options that one can go with to build Mobile apps with Javascript:

Hybrid apps development with PhoneGap: Adobe’s PhoneGap has been at the frontier of the mobile app development with Javascript. It executes most of the app code within the browser sandbox with support for executing native code with RTC. Interaction with a lot of native components is possible, the speed might be a bit slower than the native app though.

Native Apps development with React Native: React Native takes a different approach towards building a cross-platform app. A new react app is layered over an existing native app to get the full advantage of the Native API as well as cross-platform development with Javascript.

Native Apps development with NativeScript: NativeScript is a similar framework like react native, but the underlying framework is Angular 2 and not react Native.

So in a nutshell, you can choose one of PhoneGap/React Native/NativeScript to get started in the world of Mobile apps development with Javascript.

 

Designing (Mobile and Web) integrated with Javascript

Gone are the days when the designing was only about producing a PSD and HTML. These days HTML should be compatible with modern day frameworks like Angular/React and should be responsive to fit on both the web and mobile views. Have a look at some of the Best Angular Themes or React Themes on how one can write a great theme compatible with the Javascript frameworks.

You can also choose to take a ready-made built theme from sites like creative-tim.com and get started up and quickly.

 

Summing up

Finally Summing up the various options for the various components of the solution:

  1. Backend Programming: NodeJS frameworks like ExpressJS, HAPI, KOA
  2. Front End Programming: ReactJS/AngularJS/Vue
  3. Mobile Apps Development: React Native / Native Script / PhoneGap/Ionic
  4. Configuration: Webpack / Browserify
  5. Testing : Jest / Watir / selenium
  6. Javascript Enhancements: ES6/typescript

So this is how we can develop a full stack solution with javascript. Hope you find it useful. More Power to Javascript !!


 

About the Author

Ishwinder is a serial entrepreneur and is involved in various startups. He also writes at Techpikk in his free time.