Industry focused roadmap to be JavaScript developer – 2021

Posted on | by Prashant Yadav

Posted in Interview, Tech

Industry focused roadmap to be JavaScript developer - 2021

An Industry Focused Roadmap to become Frontend Developer.

This is guide is my recommendation of libraries/frameworks to learn each aspect of front-end development, based on their popularity across the industry.

This roadmap is targeted at the freshers who are trying to understand front end. If you are already familiar with front end development and want to explore another perspective, then you are welcome to explore it.

Note: If you find an issue, please comment it down, I will try to fix it. Also if you like it, share it with others.

Pre-requisites

  • Good understanding of core programming concepts.
  • Already familiar with the working of web such as with web protocols and conventions like HTTP and RESTful APIs.
  • Comfortable with basic command line actions.

Table of contents

HTML

HTML is a (Hypertext Markup Language) is not a programming language. It is a markup language that tells web browsers how to structure the web pages you visit. It can be as complicated or as simple as the web developer wants it to be.

HTML consists of a series of elements, which you use to enclose, wrap, or markup different parts of content to make it appear or act in a certain way. The enclosing tags can make content into a hyperlink to connect to another page, italicize words, and so on. For example, consider the following line of text:

<p>Hello World!.</p>

Below figure represents the anatomy of HTML.

Source MDN. Anatomy of HTML.

HTML is very important from the SEO perspective thus HTML5 introduced many new tags which really helps in SEO optimization.

Apart from that, accessibility is also an important thing to learn in HTML to make sure web-apps are accessible to everyone through different devices.

Things to learn in HTML.

  • SEMANTIC HTML (HTML5)
  • Accessibility
  • DOM

Estimated Time to learn:- 10 to 15 days (3 – 4 hrs daily).

Study Links.

CSS: Cascading Style Sheets

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

It is extremely important to have a good understanding of CSS, it may seem simple but is quite complex to work with. Writing cross device / browser style can be challenging at times.

Things to study under css.

  • CSS Specificity
  • CSS Pre-processors
  • CSS resetting / normalization
  • CSS Architecture(BEM)
  • Floats
  • Flexbox & Grids
  • SVG
  • Media Queries
  • Display Properties
  • Position properties
  • Animations
  • Psuedo Classes

Estimated Time to learn:- 10 – 15 days (3 – 4 hrs daily).

Study Links.

Advanced CSS

CSS is now advanced and provides using normal programming concepts with it like defining variable, functions, using OOPs concepts, etc. There are many extensions of it that help in using it more efficiently.

SASS

Sass stands for Syntactically Awesome Stylesheet is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).

Estimated Time to learn:- 7 – 10 days (3 – 4 hrs daily).

Study Links

LESS

Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS.

Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side and client-side.

Study Links

JavaScript

JavaScript or ECMAScript is the language of the web, it is incredibly versatile programming language using which we can build web servers, native mobile apps, web apps, and desktop apps.

Being loosely typed it is easy to learn but hard to master. Practice is the key to mastering it.

In recent times, JavaScript has seen major improvements with lots of new features being added to the language making it more powerful.

ECMAScript 2015 (previously called ECMAScript 6) was released, which had major feature updates, after that every year new features are being added to the language, new version of ECMAScript is referred as ESNext.

Here is a great article incase you want to learn history of JavaScript.

As browsers must implement the new features once they are published to make them useable, which takes time, tools such as Babel enable developers to write these new features in their apps as Babel transpiles them down to browser compatible code.

With the development of Nodejs, JavaScript was able to move out of the web to everywhere, right now you can use JavaScript as a server side languages as well as almost on every platform, Web, Mobile, Desktop, IOT, etc.

Estimated time to learn:- 30 – 45 days (3 – 4 hrs daily).

Study Links (Basic).

Topics to cover to get better at the language.

  • this
  • IIFE
  • Closure
  • Null vs undefined
  • Loop vs map
  • call, apply & bind
  • hoisting
  • Scope
  • attributes vs properties
  • Ternary operators
  • Promises vs callbacks
  • Objects, Object freezing
  • mutable vs immutable
  • Symbol
  • Currying
  • Debouncing
  • Throttling
  • async vs defer
  • Event Bubbling & Capturing
  • Prototype & Prototypal Inheritance
  • Thinking Recursively
  • Local Storage and Session Storage
  • CORS
  • sum(a)(b)(c)…(n)
  • Web Storage APIs
  • Event Loop
  • Web Sockets
  • Single Page Applications
  • Server Side rendering
  • Optimization
  • Critical rendering path
  • Lazy loading data

Advanced Study Links

Single Page Application (SPA)

Traditionally website were built with server-side rendering. Browser used to receive HTML from the server and then render it. When page refreshes or user navigates to different page, the servers used to send new HTML.

However in single page applications (SPA) client-side rendering is used. The browser loads the initial page from the server, along with the scripts (frameworks, libraries, app code) and stylesheets required for the whole app. When the user navigates to other pages, a page refresh is not triggered. The URL of the page is updated via the HTML5 History API. New data required for the new page, usually in JSON format, is retrieved by the browser via AJAX requests to the server. The SPA then dynamically updates the page with the data via JavaScript, which it has already downloaded in the initial page load. This model is like how native mobile apps work.

Advantages

  • Web apps give more native feel and are more responsive as there is no flash between page navigations due to full-page refreshes.
  • As we don’t have to repeatedly fetch the same resources again and again, we have to make fewer HTTP request, also the payload size are smaller which are faster to process.
  • The server and client are decoupled which means that we can independently develop new clients for different platforms (e.g. mobile, chatbots, smart watches) without having to modify the server code. The client can also be developed using new tech stack.

Disadvantages

  • As majority of the resources are fetched when the web app loads for first time it can hamper the initial load time of the application.
  • There’s an additional step to be done on your server which is to configure it to route all requests to a single entry point and allow client-side routing to take over from there.
  • SEO issues:- SPAs are reliant on JavaScript to render content, but not all search engines execute JavaScript during crawling, and they may see empty content on your page. This inadvertently hurts the Search Engine Optimization (SEO) of your app. To overcome this, you can either server-side render your app or use services such as Prerender to “render your javascript in a browser, save the static HTML, and return that to the crawlers”.

There is still time when server-side applications are preferred where SEO is involved as well as when we are building small scale applications like blogs etc.

But a SPA application with client-server relation is preferred for large enterprise application where a clear client-server separation scales better for larger engineering teams, as the client and server code can be developed and released independently.

Web developers these days refer to the products they build as web apps, rather than websites. While there is no strict difference between the two terms, web apps tend to be highly interactive and dynamic, allowing the user to perform actions and receive a response for their action.

While jQuery can be still used for server-side applications to add user interactivity to each page. But it is not easy for jQuery for handle large scale applications. After all, jQuery is primarily a library for DOM manipulation and it’s not a framework.

For this task JavaScript frameworks have been created to provide higher-level abstractions over the DOM, allowing you to keep state in memory, out of the DOM. Using frameworks also brings the benefits of reusing recommended concepts and best practices for building apps.

It is lot easier to onboard a Junior who is not familiar with the code base, but has experience with a framework, will find it easier to understand the code because it is organized in a structure that he is familiar with. Also popular frameworks have great community support and tutorials as well as guide which makes them easy to start with.

Estimated time to learn:- 7 – 10 days (3 – 4 hrs daily).

Study Links

React (A library to create Single Page Applications)

There is no other JavaScript library other than React which has taken the front-end ecosystem by storm in modern time. React is a library built and open-sourced by the smart people at Facebook. In React, developers write components for their web interface and compose them together.

As frontend development is shifting towards a paradigm of component-based development, where each components are developed independently and then clubbed together to create a feature and eventually leads in creating a web app using these features. React encourages that you write your HTML and CSS in your JavaScript itself. This sounds like a crazy idea at first as it is opposite of the existing good practice to write HTML, JavaScript and CSS separately. But if you keep your HTML, CSS, and JavaScript scoped to the component level only, then it is easier to do the development with conflict also different components can be developed individually without any dependency on each other while designing.

Features of React.

  • Declarative:- You describe what you want to see in your view and not how to achieve it. Each component has its own state, you simply change the state within the component and the view will update itself according to the state. It is also easy to determine how the component will look like just by looking at the HTML in the render() method.
  • Functional:- Each component is a JavaScript pure function which has props (External data) and state (Internal data). Pure functions are easy to test, and the same goes for functional components.
  • Maintainable:- React forces composition rather inheritance for scalability and reusability, thus writing your view in a component-based fashion encourages reusability. As each component has their logic and view limited to themselves, it is easier to maintain them.
  • High Performance:- React use a concept of Virtual DOM and it re-renders everything when there is a change in state or props. Why is there a need for a virtual DOM? While modern JavaScript engines are fast, reading from and writing to the DOM is slow. React keeps a lightweight virtual representation of the DOM in memory. Re-rendering everything is a misleading term. In React it actually refers to re-rendering the in-memory representation of the DOM, not the actual DOM itself. When there’s a change in the underlying data of the component, a new virtual representation is created, and compared against the previous representation. The difference (minimal set of changes required) is then patched to the real browser DOM.
  • Ease of Learning:- React has very few API’s which remains constant and hardly changes, apart from that it is one of the largest community which providing an array of tools, open-sourced UI components, and a ton of great resources online to get you started on learning React.

Over the years, new view libraries that are even more performant than React have emerged. React may not be the fastest library out there, but in terms of the ecosystem, overall usage experience and benefits, it is still one of the greatest. Facebook is also channeling efforts into making React even faster with a rewrite of the underlying reconciliation algorithm. The concepts that React introduced has taught us how to write better code, more maintainable web apps and made us better engineers.

Estimated time to learn:- 30 – 45 days (3 – 4 hrs daily).

Study Links

Alternatives

State Management – Flux/Redux

React is a library, not a framework, and does not deal with the layers below the view.

As your app grows bigger, you may find that the app structure becomes a little messy. Components throughout the app may have to share and display common data but there is no elegant way to handle that in React. After all, React is just the view layer, it does not dictate how you structure the other layers of your app, such as the model and the controller, in traditional MVC paradigms. In an effort to solve this, Facebook invented Flux, an app architecture that complements React’s composable view components by utilizing a unidirectional data flow.

In summary, the Flux pattern has the following characteristics:

  • Unidirectional data flow:- Makes the app more predictable as updates can be tracked easily.
  • Separation of concerns:- Each part in the Flux architecture has clear responsibilities and are highly decoupled.
  • Works well with declarative programming:- The store can send updates to the view without specifying how to transition views between states.

As Flux is not a framework per se, developers have tried to come up with many implementations of the Flux pattern. Eventually, a clear winner emerged, which was Redux. Redux combines the ideas from Flux, Command pattern and Elm architecture and is the de facto state management library developers use with React these days. Its core concepts are:

  • App state is described by a single plain old JavaScript object (POJO).
  • Dispatch an action (also a POJO) to modify the state.
  • Reducer is a pure function that takes in current state and action to produce a new state.

The concepts sound simple, but they are really powerful as they enable apps to:

  • Have their state rendered on the server, booted up on the client.
  • Trace, log and backtrack changes in the whole app.
  • Implement undo/redo functionality easily.

The creator of Redux, Dan Abramov, has taken great care in writing up detailed documentation for Redux, along with creating comprehensive video tutorials for learning basic and advanced Redux. They are extremely helpful resources for learning Redux.

While Redux does not necessarily have to be used with React, it is highly recommended as they play very well with each other. React and Redux have a lot of ideas and traits in common.

Your app will likely have to deal with async calls like making remote API requests. redux-thunk and redux-saga were created to solve those problems. They may take some time to understand as they require understanding of functional programming and generators. Our advice is to deal with it only when you need it.

react-redux is an official React binding for Redux and is very simple to learn.

Estimated time to learn:- 7 – 10 days (3 – 4 hrs daily).

Study Links

Alternative

CSS Modules

CSS adds interactivity to the HTML, it is used to define how HTML elements will look and adjust as to the screen, to the sibling, etc. We all understand that writing good CSS is hard, it takes years of experience to get better at it. The major problem we face is writing scalable and maintainable CSSS that also for different screens and devices. To make it easier to work with it, over time, experienced frontend developers have designed methodologies to guide people on how to write organized CSS for complex projects, such as using SMACSS, BEM, SUIT CSS, etc.

The bad thing about these methodologies are that they very fragile, they are artificially enforced by conventions and guidelines. They break the moment developers do not follow them.

As you might have realized by now, the front end ecosystem is saturated with tools, and unsurprisingly, tools have been invented to partially solve some of the problems with writing CSS at scale. “At scale” means that many developers are working on the same large project and touching the same stylesheets. There is no community-agreed approach on writing CSS in JS at the moment, and we are hoping that one day a winner would emerge, just like Redux did, among all the Flux implementations. For now, we are banking on CSS Modules. CSS modules is an improvement over existing CSS that aims to fix the problem of global namespace in CSS; it enables you to write styles that are local by default and encapsulated to your component. This feature is achieved via tooling. With CSS modules, large teams can write modular and reusable CSS without fear of conflict or overriding other parts of the app. However, at the end of the day, CSS modules are still being compiled into normal globally-namespaced CSS that browsers recognize, and it is still important to learn and understand how raw CSS works.

If you are a total beginner to CSS, Codecademy’s HTML & CSS course will be a good introduction to you. Next, read up on the Sass preprocessor, an extension of the CSS language which adds syntactic improvements and encourages style reusability. Study the CSS methodologies mentioned above, and lastly, CSS modules.

Estimated time to learn:- 7 – 10 days (3 – 4 hrs daily). Try styling up your app using the SMACSS/BEM approach and/or CSS modules.

Study Links

Alternatives

Maintainability

Code is read more frequently than it is written. When you work in a large team and are involved with multiple teams across multiple projects. Then it is extremely important to highly value readability, maintainability and stability of the code and there are a few ways to achieve that: “Extensive testing”, “Consistent coding style” and “Typechecking”.

Also when you are in a team, sharing same practices becomes really important. If you are a beginner then read about JavaScript project guidelines.

Linting JavaScript – ESLint

A linter is a tool to statically analyze code and finds problems with them, potentially preventing bugs/runtime errors and at the same time, enforcing a coding style. Time is saved during pull request reviews when reviewers do not have to leave nitpicky comments on coding style. ESLint is a tool for linting JavaScript code that is highly extensible and customizable. Teams can write their own lint rules to enforce their custom styles. At Grab, we use Airbnb’s eslint-config-airbnb preset, that has already been configured with the common good coding style in the Airbnb JavaScript style guide.

For the most part, using ESLint is as simple as tweaking a configuration file in your project folder. There’s nothing much to learn about ESLint if you’re not writing new rules for it. Just be aware of the errors when they surface and Google it to find out the recommended style.

Estimated time to learn:- 2 – 3 days (3 – 4 hrs daily).

Study Links

Alternatives

Linting CSS – stylelint

As mentioned earlier, good CSS is notoriously hard to write. Usage of static analysis tools on CSS can help to maintain our CSS code quality and coding style. For linting CSS, we use stylelint. Like ESLint, stylelint is designed in a very modular fashion, allowing developers to turn rules on/off and write custom plugins for it. Besides CSS, stylelint is able to parse SCSS and has experimental support for Less, which lowers the barrier for most existing code bases to adopt it.

Once you have learnt ESLint, learning stylelint would be effortless considering their similarities. stylelint is currently being used by big companies like Facebook, Github and WordPress.

Estimated time to learn:- 2 – 3 days (3 – 4 hrs daily).

Study Links

Alternatives

Formatting Code – Prettier

Another tool for enforcing consistent coding style for JavaScript and CSS is Prettier.

In most cases, it is recommended to setup Prettier on top of ESLint and stylelint and integrate it into the workflow. This allows the code to be formatted into consistent style automatically via commit hooks, so that developers do not need to spend time formatting the coding style manually.

Note that Prettier only enforces coding style, but does not check for logic errors in the code. Hence it is not a replacement for linters.

Estimated time to learn:- 2 – 3 days (3 – 4 hrs daily). Add prettier extension to your code editor.

Study Links

Testing – Jest + Enzyme

All the above helps to preventing bugs/runtime errors, but once something has been built, it has to be tested to make sure it is meeting all the requirements and working as expected.

Jest is a testing library by Facebook that aims to make the process of testing pain-free. As with Facebook projects, it provides a great development experience out of the box. Tests can be run in parallel resulting in shorter duration. During watch mode, by default, only the tests for the changed files are run. One particular feature we like is “Snapshot Testing”. Jest can save the generated output of your React component and Redux state and save it as serialized files, so you wouldn’t have to manually come up with the expected output yourself. Jest also comes with built-in mocking, assertion and test coverage. One library to rule them all!.

React comes with some testing utilities, but Enzyme by Airbnb makes it easier to generate, assert, manipulate and traverse your React components’ output with a jQuery-like API. It is recommended that Enzyme be used to test React components.

Jest and Enzyme makes writing front end tests fun and easy. When writing tests becomes enjoyable, developers write more tests. It also helps that React components and Redux actions/reducers are relatively easy to test because of clearly defined responsibilities and interfaces. For React components, we can test that given some props, the desired DOM is rendered, and that callbacks are fired upon certain simulated user interactions. For Redux reducers, we can test that given a prior state and an action, a resulting state is produced.

The documentation for Jest and Enzyme are pretty concise, and it should be sufficient to learn them by reading it.

Estimated time to learn:- 7 – 10 days (3 – 4 hrs daily).

Study Links

Alternatives

Deployment and Hosting

Version Control System – GIT

Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows (thousands of parallel branches running on different systems).

From its definition you would have already realized why GIT is used, it helps us to track the files and folders. If there is any addition or modification to any part in the project, you can track that using git.

The changes are tracked on your local system with corresponding to the remote repository where the whole code base is maintained (A central system).

when we work in team, everyone works on different things, thus we there is a need of a central repository where the whole code base will be maintained. Once you code changes are done, you push that changes to the central repo and pull the others code as per your requirement.

GitHub is a provider of Internet hosting for software development and version control using Git. All the major cloud service provides provides there own central repository storage service.

It important that you are familiar with basic git commands to work in collaborative environment.

Estimated time to learn:- 7 – 10 days (3 – 4 hrs daily).

Study Links

Alternatives

Package Management – NPM

A good developer does smart work rather than hard work, if there is something already build then it is wise to use that rather than building something of yourself.

Thus to download and manage all those we need a package manager. Npm (Node Package Manager) is a package manager for the JavaScript programming language maintained by npm, Inc.

Npm is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website. The package manager and the registry are managed by npm, Inc.

All the packages that are download using npm are registered in package.json file and files and folder are stored inside the node_modules.

package-lock.json is another file which is update every time when you add a new package to your project. It is automatically generated for any operations where npm modifies either the node_modules tree, or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.

This file is intended to be committed into source repositories, and serves various purposes:

  • Describe a single representation of a dependency tree such that teammates, deployments, and continuous integration are guaranteed to install exactly the same dependencies.
  • Provide a facility for users to “time-travel” to previous states of node_modules without having to commit the directory itself.
  • Facilitate greater visibility of tree changes through readable source control diffs.
  • Optimize the installation process by allowing npm to skip repeated metadata resolutions for previously-installed packages.

Estimated time to learn:- 3 – 4 days (3 – 4 hrs daily).

Study Links

Alternative

Build System – webpack

This part will be kept short as setting up webpack can be a tedious process and might be a turn-off to developers who are already overwhelmed by the barrage of new things they have to learn for front end development. In a nutshell, webpack is a module bundler that compiles a front end project and its dependencies into a final bundle to be served to users. Usually, projects will already have the webpack configuration set up and developers rarely have to change it. Having an understanding of webpack is still a good to have in the long run. It is due to webpack that features like hot reloading and CSS modules are made possible.

We have found the webpack walkthrough by SurviveJS to be the best resource on learning webpack. It is a good complement to the official documentation and we recommend following the walkthrough first and referring to the documentation later when the need for further customization arises.

Estimated time to learn:- 7 – 10 days (3 – 4 hrs daily).

Study Links

Alternatives

Deployment – CI/CD

When you commit your code to the github and once your pull request is approved and merged in the codebase, before deploying it on any cloud service it has to again generate the build and run set of test to make sure things won’t break on the production.

For this we often use tool, which helps us in continuous integration and deployement. Jenkins is one of the most popular Continuous Integration and Continuous Delivery server provider.

It helps us to run

  • Run linting for the project.
  • Run unit tests for the project.
  • If all the test cases pass then generate a production bundle with webpack into a build directory.

Once setup and configured it can be automatically/manually triggered to run the build pipeline and once the build is generated, it can be deployed using release pipeline.

Often there is a separate team (Devops) who handle it configuration and setting up the CI/CD environment, but if you want you can still learn it. Being familiar with basic things is always good.

Estimated time to learn:- 3 – 4 days (3 – 4 hrs daily).

Study Links

Alternatives

Hosting and CDN

Traditionally, web servers that receive a request for a webpage will render the contents on the server, and return a HTML page with dynamic content meant for the requester. This is known as server-side rendering. As mentioned earlier in the section on Single-page Apps, modern web applications do not involve server-side rendering, and it is sufficient to use a web server that serves static asset files. Nginx and Apache are possible options and not much configuration is required to get things up and runnning. The caveat is that the web server will have to be configured to route all requests to a single entry point and allow client-side routing to take over. The flow for front end routing goes like this:

  • Web server receives a HTTP request for a particular route, for example /user/john.
  • Regardless of which route the server receives, serve up index.html from the static assets directory.
  • The index.html should contain scripts that load up a JavaScript framework/library that handles client-side routing.
  • The client-side routing library reads the current route, and communicates to the MVC (or equivalent where relevant) framework about the current route.
  • The MVC JavaScript framework renders the desired view based on the route, possibly after fetching data from an API if required. Example, load up UsersController, fetch user data for the username john as JSON, combine the data with the view, and render it on the page.

A good practice for serving static content is to use caching and putting them on a CDN. We use Amazon Simple Storage Service (S3) for hosting our static website content and Amazon CloudFront as the CDN. We find that it is an affordable and reliable solution that meets our needs.

S3 provides the option to “Use this bucket to host a website”, which essentially directs the requests for all routes to the root of the bucket, which means we do not need our own web servers with special routing configurations.

An example of a web app that we host on S3 is Hub.

Other than hosting the website, we also use S3 to host the build files generated from each successful CI build.

In Visual Studio Code using an extension you can directly deploy static site on Azure and host it.

Estimated time to learn:- 3 – 4 days (3 – 4 hrs daily).

Study Links

Alternatives

Advanced Topics

Static Types – Typescript

Static typing brings about many benefits when writing apps. They can catch common bugs and errors in your code early. Types also serve as a form of documentation for your code and improves the readability of your code. As a code base grows larger, we see the importance of types as they gives us greater confidence when we do refactoring. It is also easier to onboard new members of the team to the project when it is clear what kind of values each object holds and what each function expects.

Adding types to your code comes with the trade-off of increased verbosity and a learning curve of the syntax. But this learning cost is paid upfront and amortized over time. In complex projects where the maintainability of the code matters and the people working on it change over time, adding types to the code brings about more benefits than disadvantages.

The two biggest contenders in adding static types to JavaScript are Flow (by Facebook) and TypeScript (by Microsoft). As of date, there is no clear winner in the battle.

You can choose anyone of them but I personally prefer TypeScript. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for the development of large applications and transcompiles to JavaScript. As TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs.

TypeScript may be used to develop JavaScript applications for both client-side and server-side execution (as with Node.js or Deno). There are multiple options available for transcompilation. Either the default TypeScript Checker can be used, or the Babel compiler can be invoked to convert TypeScript to JavaScript.

Estimated time to learn:- 7 – 10 days (3 – 4 hrs daily).

Study Links

Alternatives

Mobile App Development – React Native

It is now possible to create cross device mobile applications using just HTML, CSS, JavaScript. Thus it opened a large boundary for web developers to migrate to different platform and do the development using same technology.

React Native is a JavaScript framework for building native mobile apps. React Native brings React’s declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform.

Following features are what makes React Native an idle choice.

  • Declarative. React makes it painless to create interactive UIs. Declarative views make your code more predictable and easier to debug.
  • Component-Based. Build encapsulated components that manage their state, then compose them to make complex UIs.
  • Developer Velocity. See local changes in seconds. Changes to JavaScript code can be live reloaded without rebuilding the native app.
  • Portability. Reuse code across iOS, Android, and other platforms.

Estimated time to learn:- 20 – 30 days (3 – 4 hrs daily).

Study Links

Alternatives

Desktop App Development – Electron JS

Not only mobile apps but using HTML, CSS, JavaScript you can now build desktop apps as well. The most popular framework for it right now is ElectronJs.

ElectronJs combines the Chromium rendering engine and the Node.js runtime allowing for the development of desktop GUI applications using web technologies.

Electron applications comprise multiple processes. There is the “main” process and several “renderer” processes. The main process runs the application logic, and can then launch multiple renderer processes, rendering the windows that appear on a user’s screen rendering HTML and CSS.

Both the main and renderer processes can run with Node.js integration if enabled.

Most of Electron’s APIs are written in C++ or Objective-C and then exposed directly to the application code through JavaScript bindings.

Estimated time to learn:- 20 – 30 days (3 – 4 hrs daily).

Study Links

Alternatives

Server Side Rendering – Next.js

It is still a viable option to do server side rendering while leveraging the decoupled development capability of server and client or the best of both, some part can be rendered on server side, while some can be updated as per requirement on client side. It really helps enhancing the applications performance.

Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites. React documentation mentions Next.js among “Recommended Toolchains” advising it to developers as a solution when “building a server-rendered website with Node.js”. Traditional React apps render all their content in the client-side browser, Next.js is used to extend this functionality to include applications rendered on the server side.

Estimated time to learn:- 10 – 20 days (3 – 4 hrs daily).

Study Links

Alternatives

Progressive Web Apps (PWA): The future of web development.

A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.

Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.

Capabilities vs. reach of platform-specific apps, web app, and progressive web apps.

The three app pillars of a PWA.

  1. Capable: Between modern APIs, WebAssembly, and new and upcoming APIs, web applications are more capable than ever, and those capabilities are only growing.
  2. Reliable: A reliable Progressive Web App feels fast and dependable regardless of the network.
  3. Installable: Installed Progressive Web Apps run in a standalone window instead of a browser tab. They’re launchable from on the user’s home screen, dock, taskbar, or shelf. It’s possible to search for them on a device and jump between them with the app switcher, making them feel like part of the device they’re installed on.

What makes a good Progressive Web App?

  • Starts fast, stays fast: Performance plays a significant role in the success of any online experience, because high performing sites engage and retain users better than poorly performing ones. Sites should focus on optimizing for user-centric performance metrics.
  • Works in any browser: Users can use any browser they choose to access your web app before it’s installed.
  • Responsive to any screen size: Users can use your PWA on any screen size and all of the content is available at any viewport size.
  • Provides a custom offline page: When users are offline, keeping them in your PWA provides a more seamless experience than dropping back to the default browser offline page.
  • Is installable: Users who install or add apps to their device tend to engage with those apps more.
  • Is fully accessible: All user interactions pass WCAG 2.0 accessibility requirements.
  • Can be discovered through search: Your PWA can be easily discovered through search.
  • Works with any input type: Your PWA is equally usable with a mouse, a keyboard, a stylus, or touch.
  • Provides context for permission requests: When asking permission to use powerful APIs, provide context and ask only when the API is needed.
  • Follows best practices for healthy code: Keeping your codebase healthy makes it easier to meet your goals and deliver new features.

Estimated time to learn:- 7 – 15 days (3 – 4 hrs daily).

Study Links

Miscellaneous articles

This article was inspired by Grab’s – Frontend Guide.

Other Articles