Created by Maximilian Schwarzmüller
    Last Updated on January 12, 2018

    # Introduction

    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 Basics

    Understand HTML, CSS and JavaScript Wait 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.

    Web components? It’s just JavaScript! PWAs? Also JavaScript. CSS Frameworks? Guess what - they just use ordinary CSS.

    You don’t necessarily have to master all these technologies - every developer has preferred areas. But you need to know how HTML, CSS and JavaScript work and how they work together. There’s just no way around that.

    # Trend #2: Dive into Node.js

    Node.js is awesome! Node.js has been popular over the last few years already. That’s not about to change in 2018, the opposite is the case.

    Of course there’ll still be room for PHP, Ruby on Rails etc. But especially with Serverless Web Apps on the rise, Node.js is a server-side language you should have a look at. And you know the basics (JavaScript!) anyways, right? Node.js is simply JavaScript on the server so why not dive deeper into it and become both a frontend- and backend-developer?

    Besides that, there’s no single huge advantage that would make Node.js strictly better than PHP etc. It is a language that offers great performance. It features a vibrant and active ecosystem with many third-party packages that you can plug into your app. But the #1 reason why it’s so popular is that JavaScript is becoming more and more important. And that’s going to be the case for 2018, too.

    # Trend #3: Explore React, Angular and/ or Vue.js (Frontend Frameworks)

    Dive into React, Angular and/ or Vue.js! Did I already mention the importance of JavaScript?

    We’ll encounter it a lot throughout this article - which I guess underlines its importance.

    Here’s one part of web development where it shines: Frontend frameworks like Angular, React or Vue.js are powered entirely by (client-side) JavaScript.

    These frameworks (oh - React is a library, please don’t flame me) allow you to create highly engaging user experiences in your web app since everything is controlled via JavaScript. That allows you to re-render parts of a page (or the entire page) after it has been loaded. This saves unnecessary page reloads and request<->response cycles with the server. Native mobile-app-like user experiences are the result - and we all want great user experiences, don’t we?

    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.

    One relatively new trend that will probaly accelerate in 2018 is the pre-rendering or server-side-rendering of SPAs. That means that your app is still controlled by JavaScript and runs in the browser but that you also serve a pre-rendered version of the app on the first load. This enhances SEO (since the crawler sees what the user sees, without having to wait for some asynchronously loaded content) and can speed up your apps.

    You might want to have a look at projects like Next.js for React, Angular Universal for Angular or Nuxt.js for Vue.js - they all focus on making this easier.

    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 Compilers

    Build your own HTML elements! Trends #1 to #3 might’ve been about things you already new. Web Components (and tools that compile Web Components like Stencil are less known and hyped.

    The idea behind web components is simple: Why should we use a library like React to build components that only work in that library and not just build these components with vanilla JavaScript and use them outside of the framework, too?

    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.

    The core idea behind these projects is to give you a nice syntax and a lot of helpers - Stencil uses TypeScript, JSX and Angular-inspired features, Angular Elements uses Angular - to build custom web components. Your code will then be compiled to vanilla JavaScript, so that you can use the created components in any web page.

    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 Generators

    Jekyll, Hugo or Nuxt.js (for Vue apps) are great options. Performance wins, in 2018 more than ever.

    We have to build our web apps for more and more different devices, which are reaching our web page from all kind of places with all kinds of connectivity. Shipping a lot of JavaScript that only starts loading our content once it’s been downloaded is becoming less and less of an option therefore.

    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)?

    The answer are Static Page Generators like Jekyll, Hugo or projects like Nuxt.js for Vue.js (it’s inspired by Next.js for React). All these tools and projects allow us to do one thing: Build web pages that we then pre-render on our local server or some build server. We then deploy a bunch of static files - HTML, CSS and JavaScript. Done!

    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)

    Web apps that look and feel like native mobile apps. 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.

    So which technologies am I talking about then? Mostly Service Workers and the Web App Manifest (manifest.json file).

    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 Apps

    User serverless cloud services Serverless. 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 Bots

    Artificial Intelligence enhances most apps Okay, 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.

    # Summary

    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!