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.
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.
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:
- event-stream issue: You can see the issue here, and the explanation of what exactly happened here.
- 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.
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:
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.
*****If you want to be notified of the next issue with industry news, tips, and free learning resources, subscribe below!******
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:
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.
SharedArrayBuffer 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).
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.
There were 2 big deprecations:
Yearly presets and stage presets. You will use @babel/preset-env instead of:
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
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 above.
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:
If you enjoyed this article, I write about programming and software often:
Last year, I wrote a post that went viral which gave you step by step instructions on how to become a web developer…medium.com
This is Part 2 of a series of articles for programmers looking to upgrade their skills. Part 1 took us through the very…medium.com
Thank you for reading this far. If you enjoyed this post, please share, comment, and press that 👏 a few times (up to 50 times). . . Maybe it will help someone.
Follow me on Twitter and Medium if you’re interested in more in-depth and informative write-ups like these in the future.