It is such an exciting time for web developers: new languages, technologies, tools and frameworks appear every day and it’s so easy to get lost in the noise! Based on my experience as a web developer I have compiled a list of technologies and tools you need to learn and use to become a successful front end engineer in 2017.
Basic Front End Development
Start with learning HTML and CSS first. These are the building blocks of the web. It’s a core of any web site. Even when you build the most advanced web applications using the most modern technologies they will appear in the browser as blocks of HTML and CSS. HTML (HyperText Markup Language) – is a markup language that represents data in the browser. CSS (Cascading Style Sheets) – is a style sheet language used to set the visual style of web page. To start your career as a web developer you have to know both of these. It’s going to be a core of any web page or web application you’ll ever create.
3. jQuery (optional)
jQuery is a library for DOM manipulation. Couple years ago I would say you have to learn it. Now it’s optional. jQuery is still around. Many companies still use it. But it is becoming less and less popular. It is a good skill to have and knowing it definitely not going to hurt you. But you do not really have to know jQuery in 2017. I would say nowadays it’s more a skill for web designers, not web developers.
4. Client – Server Communication
As you already know in web there are two parts talking with each other: Back End (or Server Side) and Front End (or Client Side). Front is responsible for providing a user-friendly interface. Back usually handles business logic and data storage. You should know how these two communicate with each other, how to get data from the server to be able to display it on your page, how to put a new data into the database, how to update or delete existing data e.t.c. Basically you should be familiar with technologies like AJAX, JSON, RESTful API.
1. Source Code Editor
A source code editor is a text editor program designed specifically for editing source code of computer programs by programmers. It may be a standalone application or it may be built into an integrated development environment (IDE) or a web browser. Source code editors are the most fundamental programming tool, as the fundamental job of programmers is to write and edit source code.
The most popular Source code editors for Web Developers are Sublime Text, Atom, Visual Code, Brackets. All of them are different: it’s a personal preference which to choose. Personally, I would recommend Visual Code. I have been using it for one year now and it works perfectly for me. Before I used Sublime Text and it works fine too. Atom is the newest one: you should definitely take a look at it.
2. Basic Terminal Usage
Terminal can be frustrating at first, because you need to type commands in a terminal as a real hacker, instead of clicking buttons or menus. But as a web developer you are going to use it a lot.
3. Remote Administration Tools – FTP / SSH
SSH (Secure Shell) is a protocol that allows users to remotely administrate web server using command line. FTP (File Transfer Protocol) is a protocol used to transfer computer files between a client and server. It is the easiest way to copy HTML/CSS/JS files to the server where your website is hosted.
4. Git & Github
Git is a version control system (VCS) for tracking changes in computer files and coordinating work on those files among multiple people. Professional developers use it to keep their code in a repository that allows basically backup the code and save history of changes in the code. It allows you to go back to any point in history to review changes in your code, fix merge conflicts from other developers. You can create branches so that you don’t affect the main repository and then you can merge it with the master branch without any interruption for other people working on the same code.
Once you learn all of these technologies you can call yourself a Junior Front End developer. Now you can build simple but professional websites and UI for web applications. You should be able to find a job as a Front End developer or a freelancer. After having some experience you can learn advanced front end technologies to level up your skills.
Advanced Front End Development
2. CSS Precompilers
To master your CSS skills you need to learn CSS Precompilers such as SASS, LESS, Stylus. These are dynamic stylesheet languages that can be compiled into classic CSS and run on a web page. They allow writing clean CSS in a programming construct instead of static rules. All of them have the following mechanisms: variables, nesting, mixins and selector inheritance. Some of them have “if” statements, loops, functions and operators.
3. Front End Build Tools
Task Runners such as Gulp and Grunt. These are tools used to automatically perform frequently used tasks such as minification, compilation, unit testing, etc. Task runners use a command-line interface to run custom tasks defined in a config file.
Package Managers. Among them are Bower, npm, Yarn. Bower is becoming less and less popular but it’s still around. Npm is a default package manager for Node.js environment. Currently, it’s the most popular package manager for Web. Yarn has been released in October 2016 and is made by Facebook. It’s still new for the community but its popularity is growing.
Nowadays I can’t imaging building a professional web application without using MV* Frameworks on the Front. MV* stands for different kind of software design patterns such as MVC (Model-View-Controller), MVP (Model-View-Presenter), MVVM (Model-View-ViewModel), MVCVM (Model-View-Controller-ViewModel).
Personally, I would recommend React.js. It’s the most popular MV* Framework nowadays which offers a great implementation of modular architecture, using web components. At the same time it’s very simple, flexible and efficient. React.js is supported by a huge community that grows rapidly.
5. Data Stores
In bigger applications that work with dynamic data, alongside MV* framework you will need data storage to keep, access and update your data on the Client Side. Also you need a mechanism to keep all your data in sync across all the modules and components. There are many patterns of Data Stores or Client Side data manipulation that can help to solve this issue:
Mobx uses observable pattern and is employed for small applications.
Flux is used for big and complex applications. You can create different stores to keep different kind of data in them.
Redux is great for an application that has grown and has complex data interaction. It creates one giant store, making it easy to access data across all the applications.
Relay is used for really huge applications with a long life cycle.
Many of them created specifically for React.js, but you can try using these patterns with other frameworks. For example, I have had experience using Flux pattern with knockout.js and it was working perfectly fine. But again, it was designed specifically for React. That is one more reason to steak with React.js
6. Unit Testing
Unit testing is used to test individual units of source code and determine whether they are fit for use. For testing Front End code there are many libraries to choose from: Mocha, Jasmine, Karma and enzyme. The last one is made specifically for testing React applications.