Learning JavaScript Road-Map
Prerequisites
Before you can jump into learning User Interface Design there are a few prerequisites that need to be satisfied. First of all, you need to have a basic understanding of how to use a computer, how to install applications on your computer and how to do basic configuration in the operating system, how to use an Internet Browser to access online content (like websites) and a basic understanding of how the “Client — Server” paradigm works. Second of all, you need to be comfortable with searching things on Google and following online tutorials, as most of the things you need in order to learn User Interface Design are only found online. Finally, it is a great plus to know the English language as a high number of tutorials, courses and other useful information are easily found in English.
Step 1 — HTML and CSS
The first step in learning User Interface Design is to learn how to actually design the user interface for a website, by using Hypertext Markup Language (HTML) to structure and organize web page content and Cascading Style Sheet (CSS) to be able to change the visual properties of HTML elements. While learning HTML and CSS, we will also need to learn about Responsive Web Applications. In modern times, web sites or web applications can also be accessed by using smartphones or tablets, which have a smaller area of display. In order for our sites to be usable on mobile devices they need to be responsive, in the sense that they might need to adjust their content to ensure optimal visibility and usability on smaller displays where interactions are done by touch and swipe actions, not mouse clicks, hovers and drags.
In order to make applications responsive in a time and cost-effective manner, most people also learn Bootstrap, which is a CSS library that facilitates responsive design. In recent years, due to the increased use of smartphones, most companies have adopted a practice called “Mobile First” according to which they first design the User interface for mobile devices and after this is done, they adjust it for desktop access.
This step takes between 1 and 2 weeks.
Step 2 — JavaScript Basics
The next step after learning how to design and build our web pages, is to allow the user to interact with web page elements. The main use cases for interacting with a web page are: being able to click on buttons to obtain a specific outcome (like navigation, hide or show page elements, close notifications and popups and many more) or being able to interact with forms in order to send data to the server. JavaScript is a scripting language (as indicated by the name) that enables you to interact with forms, create dynamically updating content, control multimedia, animate images, and pretty much everything else you can do on a web page (at least according to the Mozilla Developer Network).
As with any scripting or programming language you will need to learn about variables, data types (including objects, dates and JSON representation), arrays, methods, control structures, AJAX (http requests, API calls and DOM manipulation) and basic JS promises. Finally, in order to use JS with HTML and CSS you will need to learn about handling events (mouse and keyboard) and interacting with Document Object Model (DOM) elements of a web page.
While it is not mandatory, at this point it may be useful to invest some time in learning and working with jQuery, which is a light weight JS library that facilitates the HTML/DOM manipulation, CSS manipulation, HTML event methods, effects and animations and AJAX. While this library is not specifically required, it is very likely that when working for a company, you will find many projects (especially legacy projects) that make heavy use of this library.
This step takes between 1 and 3 weeks.
Step 3 — Practice
With sufficient knowledge about HTML, CSS and JavaScript we should practice what we learned. At this point we should focus on building responsive templates for websites, making sure we are able to build: different types of responsive page layouts (side menu, top menu, extending side menu, hover menu with sub-menus, responsive menus), content structuring using Bootstrap (rows, columns, breakpoints), common UI elements (custom check boxes, styled lists, pop-ups, notifications, tooltips) and common reusable components (date/time picker, calendar, slider, custom scroll, file upload).
From a functional point of view, we should practice building different type of forms (login, sign-up, forgot password, change password, customer profile) and the associated JavaScript functionality (validation, constraints, custom selections, value ranges).
This step takes between 2 to 4 weeks.
Step 3.1 — UX Design
User Experience Design (UX Design) is the process of designing a better customer experience by applying UI Theory, Design Psychology and Product Design principles to the creation of the user interfaces, user interface elements and managing navigation and dataflows within the user interface. Most people start studying UX early on, usually immediately after they learn JavaScript basics. Once people understand how they can interact with UI elements (especially using AJAX) they begin to learn how to use their knowledge to create better experiences for the users of their designs.
Overall, UX refers to improving usability, accessibility and consistency of the design in order to improve the overall user experience and facilitate the way the user actually uses the designed user interface. In order to increase usability and accessibility UI developers should consider the following principles: immediate access to valuable information, the minimum number of steps to execute critical operations, visual cues to facilitate usability (highlights, tooltips, borders, notifications, spinners, loaders) and simplicity both in terms of design and content structure (avoiding information or actions overload).
Learning UX is not usually straight forward (although it can be if you attend a course on UX Design). People seem to prefer to learn in shorter increments, only the information that is related to their current or ongoing projects. However, a higher degree of seniority is usually associated with a great understanding of UX design principles and practices.
This process can take between 2 and 8 weeks, but is usually an on-going process for many years.
Step 4 — Advanced JavaScript
The next step is to tackle the advance JavaScript topics like scopes, closures, “this” (global and owner contexts, binding), “let”, “const”, arrow functions, IIFEs (immediately-invoked function expression) and other ES6 specific additions to JavaScript. In terms of advanced topics, we also need to address Objects, Prototypes and the Objects Oriented Programming principles and practices which are now beginning to be widely adopted for User Interface development by software development companies. In this step, it is also recommended that you also get familiar with TypeScript, which is a programming language (more of a strict syntactical superset of JS) built on top of JavaScript, providing OOP features (interfaces, classes, constructors, modules and so on), static type checking and lambda functions.
Note that the amount of information you need to learn is rather small compared to the HTML, CSS and JS basics. However, the complexity and difficulty of the concepts is very high. Most people, move on from these topics after some light reading, but these concepts can make or break a JS application, and should receive your full attention. In order to better understand how these concepts, work and how they are meant to be used, it helps if you develop small proof of concept applications that provide sufficient complexity and context for you to master these concepts.
This step takes between 4 to 6 weeks.
Step 5 — JavaScript Libraries
While not part of core JavaScript features, the Reactive Extensions for JavaScript (RxJS) library has become increasingly popular in the last few years. Not only does it facilitate asynchronous and event-based scripting but is also widely used by trending JS frameworks like AngularJS.
At this point, you most probably are already employed or participating in an internship program. As such, you may be required to learn additional JS libraries specific to the applications and projects developed by your company. Some of the most common JS libraries used are: Boostrap JS (for using Boostrap specific UI elements and their associated functionality), Lodash (for simplified working with Strings, objects and arrays), Underscore (provides multiple functionalities for objects, collections, arrays and other utility methods), D3 (facilitates data driven documents and creative data visualisation) , ChartsJS (facilitates the creation and interaction with charts and data visualisation), AnimeJS (for fast and easy animations), JsPDF (for generating PDF files) and MomentJS (for simplified working with dates and times).
This list contains a minimum of libraries you might encounter while working in a software development company as there are hundreds more that you might need to learn and use. While there are clearly a lot of utility libraries for JavaScript (especially compared to other scripting or programming languages) having direct, hands on experience with most of them is not required as most of them can solve very specific problems and can be learned in a few days.
Another important aspect of using libraries is managing dependencies. Most JavaScript developers learn to use NPM which is a dependency management tools installed with any distribution of NodeJS. Aside from managing dependencies, most UI developers also learn how to automate most of the repetitive tasks required by web applications like minification, compilation or unit testing. The tools of choice for task automation are usually Grunt or Gulp.
This step takes between 2 to 8 weeks, depending on the libraries you want to explore and learn.
Step 6 — Advanced Practice
Now that we have enhanced our JS knowledge with advanced topics and some of the most commonly used libraries it is indicated that we take some time for more practice. By this point you should be proficient with building web page layout, user interface elements and forms and manipulating both the data and the DOM.
Practice at this point should be more oriented towards advanced functionalities that are required for commercial applications like: advanced data representation (lists of products, item cards, shopping basket, checkout pages), reporting, searching and filtering, timed events, asynchronous operations, reusable components, component interactions, state management, service integration (Google, Facebook, LinkedIn and many others), authentication, payment integration, security and performance.
Note that security and performance require a considerable amount of reading, experimenting and exercising in order to be mastered. It is also very unlikely that you will be able to completely learn these two topics only by practicing, as they require real life use cases in order to learn what is truly relevant and what is not.
This step takes between 2 to 8 weeks.
Step 7 — UI Frameworks VueJS, ReactJS and AngularJS
One of the most relevant advantages of JavaScript is the high number of JavaScript frameworks that can be used to develop large scale, high performance applications, with greater ease and with considerably less lines of code (implicitly less effort). While there are many JS frameworks, we have selected three that are widely used and are more likely to be required by a UI developer position: VueJS, ReactJS and AngularJS.
VueJS is a lightweight view layer (the View from MVC) only framework, able to provide two-way data binding, conditional or loop-based DOM rendering and component-based composition of the user interface. In terms of complexity is incredibly easy to learn and use, but it is also limited in terms of actual functionality, requiring the use of other JS frameworks (or just pure JS) to provide other mandatory functionalities for UI applications.
ReactJS is a declarative state management framework able to provide efficient UI updates for large amounts of data. While it also provides JSX (syntax extension for JavaScript), support for components-based composition and conditional rendering it provides a less efficient solution for form management. The framework itself is very easy to learn and use. Since ReactJS is focused on state management it is very common for ReactJS applications to also use React-Redux which is a state management library for JavaScript.
AngularJS is a large scale (called monolithic by some developers) JS framework, able to provide two-way data binding, component-based composition, filtering, services, routing, extensive DOM and CSS manipulation including conditional and loop-based rendering, dependency inversion, modules and lazy loading, in a structured MVC architecture. The large number of provided features should be a clear indicator that AngularJs is considerably more difficult to learn compared to VueJS and ReactJS.
Note that there are also many libraries that further facilitate application development for all three frameworks, especially in terms of UI components. Most notably, each of these three frameworks has a Material Design specific implementation, which comes with easy to use and very useful UI components (notifications, panels, tabs, dialogs, data picker, slider, enhanced form inputs and many more).
This step takes between 1 and 4 months.
Step 7.1 — Node JS
While not specifically required for UI development, most UI developers also learn NodeJS, which is a server side, cross-platform JS execution environment. This means that NodeJS can be used to develop both back-end (REST API services, encapsulate business logic, connect and interact with databases, caches and message queues and many other) and front-end (generate user interface based on a templating language) functionalities. NodeJS is able to provide all these functionalities by integrating with a large number of libraries and frameworks like: ExpressJS (for API development), MeteorJS (for developing isomorphic applications) and DerbyJS (server-side render and live bindings between the view and model.
It takes between 2 to 8 weeks to learn the basics of NodeJs and ExpressJS.
Step 7.2 — Mobile Application Development
Learning JS frameworks also opens the possibility to start learning and working on mobile specific applications by using React-Native (widely adopted, highly popular framework for building cross-platform native apps based on ReactJS) or Ionic (a less popular, but very easy to learn and flexible framework for building cross-platform native apps by using AngularJS, ReactJS, VueJS or pure JavaScript).
Note that the industry trend is to adopt React-Native for some mobile applications, but there are still many companies that choose to develop mobile apps with dedicated native mobile teams for Android and iOS. In this context, if you choose to learn mobile development using JavaScript frameworks make sure that such positions are accessible to you.
It takes between 1 to 3 months to learn React-Native or Ionic.
Step 8 — System Design
By this point we covered almost all technical topics related to building user interfaces and working with JavaScript. We also had a fair amount of practice building complex functionalities that are frequently used in commercial applications. In order to further enhance our skills and knowledge (and possibly prepare for technical leadership roles) we need to invest time in learning the concepts and principles related to the system design and how to design systems based on the given requirements.
As with any other programming or scripting language, we should start by focusing on Development Principles (SOLID, DRY, KISS, YAGNI, Law of Demeter) and Development Practices (Clean Code, Unit Testing and Code Review). The second step is to invest in learning the design patterns that are applicable to JavaScript like Prototype, Module Design, Revealing Module, Façade, Observer, Lazy Initialization and some of the other patterns that are less likely to be used.
As with other topics related to User Interface development, mastering design patterns and system design requires a period of developing proof of concept applications, in order to understand the use cases for each pattern.
This step takes between 1 to 3 months.
Step 9 — System Architecture
Given the extraordinary flexibility of JavaScript, a problem that many companies face when developing large scale applications is related to the actual structuring and organizing of the application code, in a manner that is easy to understand, easy to change and easy to maintain.
We need take into account that the application code will be structured and used differently based on the type of UI application we are developing, which can be: a single-page application, a multi-page application or an isomorphic application.
Based on the way we intend our code to be used or re-used, the way we will interact with the UI elements and the degree to which our code needs to support flexibility (while still adhering to the Single Responsibility Principle) we might need to apply one of the following architectural patterns: Model View Controller (MVC), Model View Presenter (MVP), Model-View View-Model (MVVM) or Component Based. The way to choose to structure, organize and use our code will have a strong impact on the quality of the code we write, the time and costs of changing it or maintaining it, its re-usability, its testability and its flexibility.
As with other topics related to User Interface development, mastering architectural patterns requires a period of developing proof of concept applications, in order to understand the use cases for each pattern.
This step takes between 3 to 6 months.
For more information and 100+ free courses visit:
For online courses and webinars visit:
