2017 has been a great year for web development - a lot of new technologies like Web Components or PWAs became usable in most browsers for the first time. These technologies still are very new though - and we got a lot of other things going on in the web development field, too.
What's going to stick around? What's getting more important in 2018? Let's take a closer look in this article.
One very important word before we dive in: These trends are NOT ordered by importance!
#Trend #1: Understand the BasicsWait what? I started by outlining the awesome new technologies we have and now we dive into ... the basics?
Yes, because these will stay the most important thing you have to know as a web developer in 2018! That sounds trivial but since we have ever more technologies making up web development, it's crucial to understand what everything builds up on.
#Trend #2: Dive into Node.jsNode.js has been popular over the last few years already. That's not about to change in 2018, the opposite is the case.
We'll encounter it a lot throughout this article - which I guess underlines its importance.
To be precise, if you re-render the entire screen and hence create the illusion of loading different pages, you create a so-called Single Page Application (SPA) since only one page (index.html) was loaded and still it seems like the web app hosts multiple pages.
More and more web apps are built as a SPA since that really brings a mobile-app-like feeling onto the screen of your users. But even if you only control parts of your server-side-rendered pages with these frameworks (with the exception of Angular, it's really only good at creating SPAs) you can enhance the user experience since you can implement dynamic elements like image carousels or accordeons.
You could do this in the past, with jQuery for example, but with React, Angular and Vue, it simply becomes easier and more powerful.
Users probably continue liking engaging web apps, hence frontend frameworks like Angular, React or Vue.js are going to stay important in 2018. If you came looking for a winner, I have to disappoint you though.
All three frameworks are looking good at the moment. You can find a (highly opinionated!) comparison here but ultimately, I recommend diving into all of them (at least a bit) and then picking your favorite.
#Trend #4: Web Components & Component CompilersTrends #1 to #3 might've been about things you already new. Web Components (and tools that compile Web Components like [Stencil](https://stenciljs.com/) are less known and hyped.
Until late 2017, browser support was a bigger issue but as of early 2018, it's looking pretty decent. The four Web APIs that make up web components - Custom Elements, the Shadow DOM, HTML Templates and HTML Imports - are supported by all major browsers.
Especially the first two elements - Custom Elements and the Shadow DOM - are highly interesting Web APIs.
With custom elements, you can do just what it sounds like: Build your own HTML elements (e.g.
<my-image-carousel>). These elements contain all the code that's required to bring something on the screen - no framework is needed! And even better than that: You can use these elements in conjunction with a framework like Angular, in case you need some other functionalities of that framework (i.e. beyond its capabilities of creating re-usable components).
The Shadow DOM kind of builds up on that and allows you to also scope certain CSS styles to your custom elements. This gives you truly re-usable 'HTML elements'.
HTML templates allow you to define HTML code (using 'normal' elements or other custom elements) inside your custom elements. HTML imports would allow you to import HTML files into HTML files, this standard is dying though, it's not really needed since we typically use build tools and bundlers like Webpack anyways.
Building web components/ custom elements manually can become quite cumbersome as these example show.
That's why component-compilers like StencilJS look very promising. Angular Elements will be another project that allows you to use a nicer syntax to then automatically compile it to native web components.
You don't need to use a specific framework or anything like that.
We can be really excited about web components since using them gives us a lot of possibilities of reducing our bundle sizes (you might be able to build web pages without any framework!). Additionally, these custom elements are highly re-usable across projects. Sounds like a dream to me.
#Trend #5: Use Static Page GeneratorsPerformance wins, in 2018 more than ever.
Additionally, SEO obviously matters but search engine crawlers don't understand asynchronously loaded content (i.e. content that's only loaded and renderer AFTER the first page load because it's fetched from some server). And with more and more apps being built in a serverless manner, we might not be interested in rendering our pages server-side either.
How do all these things fit together? How do we serve a pre-rendered version of our web page without dynamically pre-rendering it on some server (as we did it for the last 20 years)?
Okay, Nuxt.js and Next.js are not focused on that, you could also use them for rendering SPAs dynamically on a server. But still, the static page generation functionality is included there, too.
The huge advantage of using such tools is that we can ship pre-rendered pages whilst still being able to follow a serverless approach. We'll be some happy SEO-optimizing, cost-saving folks!
One thing to keep in mind though: If you're building a page that features 10 of 1000s of pages, pre-generating all of them, possibly multiple times per day, can become an issue.
That's the downside: If you change something about one single page or the data that belongs to one page, you have to re-render all of them (because the tools don't know what you changed). That being said, it's important to highlight that the mentioned generates are blazing-fast so this may never become a real issue for you.
Additionally, you can enhance your rendered pages by also including some asynchronous updating functionality - i.e. code that checks for updated versions AFTER your page has been loaded in the browser of your user.
#Trend #6: Progressive Web Apps (PWAs)Progressive Web Apps (PWA) is a term that sums up a couple of technologies that allow us to build web apps that behave (and feel) a lot like native mobile apps.
That mostly includes offline functionality (i.e. parts of the web app work without an active connection - after the web app has been loaded at least once), installability (i.e. the web app can be added to the device homescreen) and the usage of native device features (like accessing the device camera).
Okay, that's all nice but why wouldn't we just build a native app then?
Because this has two major disadvantages: The fact that you have to learn two languages (Java/ Android and Swift/ObjectiveC) and that you're reach is highly limited. Building a mobile app always sounds fun and awesome until you release it and you notice that no one downloads it.
The average user installs zero (yes 0) new apps every month!
That's not too much, is it? On the other hand, people search for things on Google all the time. And they find: Your web app. Bingo, that's why it's a good idea to bring the best from both worlds - exactly what a PWA does.
That alone would be awesome already but it's the 'progressive' part that makes this technology amazing. You don't have to go all-in on PWA features, you can instead simply implement what you need the most. Want an installable web app? Focus on that, it's as easy as that.
Service Workers allow you to control a special browser cache, hence giving you the power to pre-cache certain assets and define when they should be loaded from cache and in which cases the network should be used.
The manifest.json file on the other hand provides useful meta information about your app to the browser, allowing the app to be installed on the homescreen.
There's of course way more to it and you can dive into my Complete Guide on PWAs if you want to learn more about this awesome technology.
#Trend #7: Build Serverless AppsServerless. What does that even mean? How should a web page without servers work?
The answer is simple: It doesn't. But the term Serverless refers to something different.
Serverless means that you don't have to worry about managing and updating servers, that your server capacities scale infinitely and that you still only pay for what you need. No visitors no (or almost no) costs. It's that easy.
How does that work?
You only write your code that should run on-demand (e.g. when a user subscribes to your newsletter), upload it to some serverless service (e.g. AWS Lambda), maybe add some additional services (e.g. AWS API Gateway to easily build a serverless REST API) and you deploy your static assets to some static host like AWS S3.
That's it, your app/ code now only runs when needed, i.e. when a user is interacting with it, and you therefore don't pay for any idle time. Additionally, you don't need to worry about configuring your server correctly because there is no server.
To me, this sounds pretty good, so it's no wonder that serverless is a hot topic and it's going to stay hot for 2018.
Whilst a lot of groundwork was done over the last years, we now got more and more tools to build amazing serverless apps (e.g. the Serverless Framework) and with that DevOps is becoming easier/ better for Serverless, too. It should also be noted that whilst Amazon Web Services (AWS) is a strong innovator in that area, we now got more and more companies offering serverless services - both Microsoft Azure as well as the Google Cloud have serverless services.
So overall, the development of serverless apps becomes more enjoyable, testing becomes easier and more and more resources for learning how to build serverless web apps become available. I also got a course on that.
#Trend #8: Artificial Intelligence and BotsOkay, you would've been sad if it weren't included, wouldn't you?
There's probably no topic that enjoys more hype than Artificial Intelligence (AI) and bots these days.
But to be honest: These are hot topics and AI is going to become more and more important over the next years - including 2018.
AI is NOT limited to self-driving cars. Think about chat bots on your page that help your users understand your content. Consider image recognition and optimization tools. And so on.
There are plenty of use-cases for AI-driven components in web pages. We're only diving into that era but it never hurts to be among the first to dive into new stuff that's going to stick around.
AI is a broad field though. You can dive into Python, Machine Learning, Big Data, Deep Learning and building AI tools yourself. If you master all of that, you'll have golden times ahead of you ;).
But for the rest of use, we can dive into more and more tools that allow us to implement AI services into all kinds of apps and business models without the requirement of being an AI expert.
Consider tools like AWS Lex, a service that allows you to build intelligent chat bots which you can implement into your page. Tools like this make AI accessible to all of us and allow you to focus on your idea and business logic. And we'll see a lot of tools like this emerge (and become better) in 2018 - hence this is a trend you probably don't want to miss.
Throughout this article (and video) I had a look at the things I consider to be highly important in 2018.
Is this all you should learn?
No, not at all! Neither can I look into the future nor is there nothing else but these eight trends.
There's so much more to learn and master! There are a lot of related technologies like diving into DevOps (setting up and managing development workflows) that you also might need to learn.
But the trends highlighted in this article are probably going to stick around and continue to be important throughout the entire year and even the year(s) thereafter.
There's probably never been a more complex world (in web development) but there's also never been one with more opportunities. Go, grab them!
Related Premium Courses
Angular - The Complete Guide
Learn Angular from A - Z with this best-selling, 5* rated complete course!
React - The Complete Guide
In this course, you'll learn React from scratch. And then even further - including React Hooks, Redux & more!
VueJS - The Complete Guide
Learn Vue.js from from the ground-up and join thousands of other happy students!