Web Development 2018 👩‍💻 👨‍💻— Year in Review

What happened in the web development world in 2018? The industry is growing faster than ever, and 2019 will see a lot of demand for Web Developers. To get you prepared for the coming year, here are the important topics, trends, and stories that happened in 2018.

PS — you can also follow the free monthly newsletter that I write with the most important topics, trends, and free learning resources, to keep your skills current in the web development industry.

For the first time in a long time, the Javascript ecosystem seems to have slowed down from the days of Javascript fatigue and we have a predictable way to build front end applications using (somewhat) mature libraries like React and Angular and Vue.

In 2018, all of these libraries focused on 2 main improvements:

1. Improved CLI experience

Gone are the days where you have to build your own starter project with Babel, Webpack, Eslint, testing libraries, and other tools. I mean that is still an option, but developer friendly CLIs have really made this experience really nice and easy to get going with any sort of project (Remember how it was like 2+ years ago??). The bonus is that a regular developer doesn’t have to worry about keeping the latest libraries and plugins up to date and configuring them since these CLIs do it for you.

• Angular CLI
• Create React App 2
• Vue CLI

2. Faster Rendering Performance

React 16, Angular Ivy, and Vue 3.0 announcements showed that improvements and rewrites of rendering engines for each of these libraries/frameworks are important to make sure that developers are able to create fast and performant applications.

Overall, there were big improvements to these libraries and all 3 of them are viable options for doing frontend development now. If you want to learn more about the big changes in these libraries, and what the trends are for 2019, see the Front End Section of this article I recently wrote.

If you are wondering: React, Vue, or Angular…which one should you chose? Probably this one.

The development world came to a more unified realization this year when it comes to NPM package manager: Security is a major issue that needs to be solved. There is no clear solution here, but 2018 showed us that we need to prevent major hiccups we had this year. The 2 major ones:

1. event-stream issue: You can see the issue here, and the explanation of what exactly happened here.
2. Access tokens of 4,500 accounts stolen: on July 12, 2018, the popular package manager, NPM, had a bit of a security issue and they finally added two factor authentication to prevent future problems.

As one of the most popular posts in 2018 shows, third party code hosted by places like NPM can make the user of that library extremely vulnerable. Be careful out there when using 3rd party libraries.

Speaking of NPM, 2018 also saw developers be more cautious about the libraries that they are adding to a project and how just doing npm install <library> isn’t the answer to all of their problems.

Libraries like Preact, date-fns, and this VS code plugin showed us that more than ever, web developers are thinking about minimizing the size of their code and only delivering necessary Javascript code.

Before you add too many 3rd party packages to your codebase, you should run it through this great little tool that breaks down how this package will affect your codebase. Then ask yourself: Do I really need this extra bloat?

Not much was resolved in 2018 when it comes to CSS methodology. We still have the same debates and there isn’t a clear winner.

When it comes to CSS methodology the 3 main ones from 2018 are:
1. BEM
2. Atomic CSS —an example of this philosophy in a library is tachyons.
3. CSS in JS — mainly popularized by React. The two leading libraries for CSS-in-JS are styled-components and emotion. But they also have a performance penalty.

Overall, 2018 has still maintained the same debates with nothing being resolved on this front. Pick the one that suits your project best.

HTTPS is an absolute must for any website sending user entered data to a server. Google will penalize you now if you don’t have it set up.

So you better learn what HTTPS is and start using it with something like Let’s Encrypt.

2018 finally saw the adoption and stability around CSS Grid, which will now make CSS layouts that were difficult back in the day very easy when you combine CSS Grid with Flexbox. Will Bootstrap now be less appealing? We will see, but moving on, these 2 should be your default for your CSS styling tool belt.

This is actually BIG news. Microsoft is ditching their own browser engine for Chromium based browser. What this means for you as a developer is that the move will eliminate the need to even consider how pages will display on Microsoft’s browsers (I.e. Edge). If it works on Chrome, it will work on a Microsoft browser. Great right?

Maybe not. This limits the competition to just two major browser engines: Chrome and Firefox. Is Firefox the only hope for us to maintain a fair competitive market?

2018 saw some great patterns and strategies evolve for improving web performance especially since more and more of the web traffic comes from mobile users where internet connections and processing may not be the fastest.

The major things that we learned in 2018 are these best practices when it comes to performance:

• Angular, React, Vue specific optimizations
• Code Splitting
• Tree Shaking
• Delivering only necessary Javascript code
• Being more mindful of what NPM libraries you are using and minimizing library boat.
• Having a performance budget
• Prioritizing assets better through use of CDNs and browser priority tools.

Google… *cough*, I mean developers are trying to say bye bye to desktop apps and mobile apps by just having people use Progressive Web Apps.

With Safari finally adding some support for PWA, it’s an easy win to implement progressive web app features to your project. At the end of the day, all you need to really learn to get started is a combination of a manifest.json file and utilizing service workers.

Web Components adoption by the browsers finally got close to what we want in 2018.

The promise of components that you can share between React, Angular, Vue and plain old HTML is nice, but until we see some major adoption and significant benefits, it’s hard to say when it will take off. We’re moving in the right direction though.

Two vulnerabilities took the entire tech industry by storm in 2018. 
1. Meltdown — is Intel specific (although most processors are at risk). The way to fix this vulnerability was to remove some optimizations that the CPU was doing which reduced the speed of every Intel processor by up to 30% (citation needed).

2. Spectre — affects pretty much every single program and the only fix is to redesign how people architect processors. You can read more technical detail about it here.

Why should you care? The new Javascript featureSharedArrayBuffer was disabled by default in all major browsers on 5 January, 2018 in response to Spectre. Chrome re-enabled it in v67 on platforms where its site-isolation feature is enabled to protect against Spectre-style vulnerabilities, but a lot of browsers developments had to slow down due to this (i.e Web Assembly).

In 2018, Node.js in combination with Express.js became the main way to write backend API servers in the Javascript community. It’s nice to have a more standardization in the backend world than we do in the front end world. So stick to Node.js + Express.js.

React had a bit of an identity crisis this year, with the new Context API coming out, and the popularity of GraphQL + Apollo gaining ground. For the first time in a long time, Redux finally seems like not the obvious choice for managing state.

Apollo has built-in offline first client cache that will make Apollo+GraphQL a serious alternative to Redux (yes, technically you can use both of them together). New Context API came out and many people called it the death of Redux even though Context is something you previously had in React and it only got a makeover.

GraphQL is currently one of the hottest topics right now in the developer community and 2018 really saw the popularity of learning this technology skyrocket by developers.

Containers (popularized mainly by Docker) have given us a completely different architecture setup from a few years ago. One of the major ideas that has come out of it is Serverless. Serverless doesn’t mean no longer having servers as the name suggests, but instead, it means that somebody else is managing servers (infrastructure) for you so you can focus on your application logic and not worry about things like scaling.

The popularity for Serverless started in 2017 and continued onto 2018 with the most common use case being AWS API Gateway combined with AWS Lambda (functions as a service) to be used by your front end application code.

With Webpack 4 and Parcel coming out in 2018, we saw the industry move towards less configuration. Both of them are going in the direction of less complexity and more higher level “do it for me already” attitude that we are seeing a lot of (like in the front end library CLIs). This is going to be great for web developers so they can focus on application logic instead of their tooling and configurations.

Javascript has to be one of the most heavily debated languages. With it being one of the most used languages in the world, I guess it comes with the territory. 2018 saw a big push towards static typing becoming popular in the innocent dynamic typing world of Javascript. The contenders?

• TypeScript: Superset of JavaScript that compiles to JavaScript.
• Flow: static type checker for JavaScript.
• Reason: Typed language that leverages the JavaScript & OCaml ecosystems
• PureScript: A strongly-typed language that compiles to Javascript, written in and inspired by Haskell
• Elm: Purely function language that compiles to Javascript.

Static vs Dynamic typed languages is a historical/philosophical debate that isn’t going to be settled anytime soon. None of the above will overtake Javascript as the main language of the web. However, with Angular and now Vue using Typescript and making it standard with their developer community, Typescript will probably continue to grow and dominate all of the other options above.

Babel 7.0 was released in 2018 that introduced some breaking changes. The entire goal was to align the ecosystem better for the future and making sure that there weren’t a sea of individual javascript projects with different presets and syntaxes that “diverged” from core javascript language.

There were 2 big deprecations:
Yearly presets and stage presets. You will use @babel/preset-env instead of:

• babel-preset-es2015
• babel-preset-es2016
• babel-preset-es2017
• babel-preset-latest

The stage presets will now have to be added individually if you want to try something that is still early in the TC39 proposal process. Luckily, the CLIs mentioned previously will most likely take care of this for you.

Open source projects have once again flourished in 2018 and we all received some amazing libraries, tools, and software practices from the big tech companies. In addition:

• Microsoft bought Github, and are all of a sudden very into open sourcing their work.
• IBM bought Red Hat
• Amazon is into Advertising
• Facebook creeped out everybody. They continued on and made a little oopsie, also known as exposing 50 million user accounts. They also found a way to make money from your phone number.
• Google made people really angry by doing this and this. Google then went on to say “hahah we’re just kidding everyone…are we still cool?”. Now tools like No More Google are popping up. They also exposed data of 52million people. Google is starting to get a bad rep.

You can read more about the motivation behind what the big tech giants do in my blog post here: The Programer’s guide to the big tech companies

WebAssembly 1.0 promises a world where we can do computation heavy tasks like image processing and gaming through the use of multiple languages outside of Javascript by allowing a binary format that runs on the web. WebAssembly made great strides in 2018 and as you can see in this blog post, you can start to use it now that all major browsers are supporting it. You can even import WebAssembly files directly through Webpack. Although there is still a lot of work to do, 2018 saw great strides in pushing the boundaries of what a web browser can do.

The Big Takeaway

2018 saw a lot of improvements and changes in the web development industry. But the question you should be asking yourself now is “Where do we go from here?”

What will happen in 2019? Have a look here for my predictions, and don’t forget to sign up for my monthly newsletter below.

By the way, all the courses I teach for programmers keep this methodology in mind to teach you the most modern and important skills in the industry to make you valuable to employers. They’re pretty good courses (if I say so myself) so if you’re interested in leveling up your skills as a web developer, do check them out at the end of the page.

By the way, my full time job is to teach people to code in the most efficient way possible as the Lead Instructor of Zero To Mastery Academy. You can see a few of my courses below or see all of my courses by visiting the courses page.