Web Dev Trends 2019

The web dev industry changes quickly - we got new trends and new frameworks coming up every day. What's worth diving into and what can you ignore safely? Here's a list of must-watch web dev trends for 2019!

Obviously, as with all such lists, it's important to keep in mind that this is a highly subjective list of topics. It reflects my thoughts and ideas. Please absolutely join the discussion below the YouTube video you find at the top of this page!

This might be a strange trend but it's just so important!

As a modern web developer, it's actually easy to get lost and dive into advanced topics without understanding the basics first.

But what are the basics?

You should know HTML, CSS and JavaScript of course but I'd argue that Node.js also is kind of a must-know basic ingredient of modern web development.

Node.js is not just a JavaScript runtime that can be used to write server-side applications. Instead, it also powers modern build tools like Webpack and enables solutions like Electron or Ionic/ Capacitor to do their jobs.

Make sure you understand the role of each of these basic technologies and also make sure you understand the base syntax and features.

You certainly don't have to become a CSS expert if you mostly work with JavaScript and React.js. But it won't hurt if you understand how styling works as this will also influence how you write your components or templates.

And it's the same for the other basics: Obviously you don't have to master everything. But by knowing the fundamentals you'll not only be a better developer yourself but you'll also be able to work efficiently with other developers focusing on the parts you're not so keen about.

This might be a strange trend but it's just so important!Today's web development landscape is all about APIs and microservices. With a broad variety of clients connecting to our backend services (mobile apps, SPAs, desktop apps) we often don't need to return HTML from our server-side code.

Instead, you want to exchange data, typically encoded in JSON format.

For that, REST APIs are often the common solution. And this kind of API is there for a good reason of course. You decouple your frontend and backend and you only exchange data without keeping any client data on the server. That allows you to serve a broad variety of clients with one and the same backend.

But REST APIs do have their issues.

The core idea of having a couple of endpoints (paths + Http verbs) to serve all needs of your frontends (clients) quickly shows some weaknesses. Clients are simply too diverse and evolving too quickly for REST APIs to keep up.

Often, you therefore end up with APIs that send too much data which then has to be filtered on the client.

GraphQL is a query language invented by Facebook that solves this issue.

Sometimes, people think GraphQL is a language to query Facebook's data or that GraphQL can only be used with React.js.

Both is wrong!

A GraphQL API is simply an alternative to a REST API.

It exposes one endpoint to the clients but parses a rich query sent by the clients. And on the server, you set up logic that can return different slices of your data based on the query sent by the client.

This high flexibility makes GraphQL a great choice for rich client-side applications and hence GraphQL is soaring in popularity.

Over the last year, it also became way easier to learn since we now have a decent set of tutorials as well as great "official" docs over at graphql.org.

The stage is set for GraphQL. And whilst there of course still are plenty of use-cases for REST APIs you should absolutely have a look at GraphQL for your next API backend.

This might be a strange trend but it's just so important!Frontend frameworks like React (yes, it's a library...), Angular and Vue are ruling the world of client-side web development.

And they do so for a good reason of course!

Frontend web development is difficult - at least for anything beyond very trivial applications.

Updating the DOM (efficiently) when data changes is hard. Managing state is hard. A lot of things are hard!

And when you have to focus on all the nitty-gritty details, you will lose time to implement features and logic your users will love.

That's where frameworks fill the gap. By giving you powerful tools to build your web app, you can focus on providing a great, reactive and highly dynamic user experience.

With the web being the primary platform for many apps, knowing the tools to develop these apps is invaluable.

And it's not just the web!

Web technologies (HTML, CSS and of course JS) are also used to build desktop (with Electron) or mobile (with Ionic, React Native or NativeScript) apps.

And of course building such apps also demands for tools that help you focus on your business logic rather than the data/ state management and DOM updates.

Therefore frontend frameworks were extremely important in 2018 and they will stay important in 2019.

And I'll even go as far as to say that we'll be talking about the same three major frameworks (React, Angular, Vue) by the end of 2019 as we are right now.

This might be a strange trend but it's just so important!I already predicted Web Components (custom HTML elements) to be a trend in 2018 in my Web Dev Trends 2018.

I was not totally wrong but we also didn't see a total breakthrough.

That will certainly change in 2019 though.

Why?

Because we now have great browser support and amazing tools that make building native web components way easier - Stencil.js is leading the way here. It does not only create native web components but it also adds functionality to automatically load polyfills older browsers might require to use the web components. And it ships with automatic code splitting (i.e. only code for components that are being used is downloaded).

The large selling-proposition of web components is that you have to use no framework to deploy them in your app. You can use tools like Stencil but these tools also just spit out native (vanilla JS) web components.

That allows you to easily re-use your custom HTML elements across projects. No matter if you use React in project A and Angular in project B - you can use your web components in both of them without any changes needed!

This might be a strange trend but it's just so important!What is the JAM Stack?

• JavaScript

• APIs

• Markdown

The JAM Stack is all about building static web pages that only use HTML, CSS and JS. You have no server-side language that generates your views/ pages.

Instead, you use static page generators like Gatsby.js to generate all pages in advance. You can thereafter deploy your statically built app to a static host like AWS S3.

Static pages? Does that mean you got no dynamic data in there?

That's where the API and Markdown come into play.

Static page generators of course allow you to tap into dynamic resources. You often use markdown (because it's easier to work with for non-web-devs) to write your blog posts, product descriptions etc. The static site generator then parses these markdown files and converts markdown to HTML. Add CSS and JS and you got a web app.

The A (API) is then important for your running app. Your running app is a bunch of statically generated pages that turns into a SPA once loaded in the browser. And you can then interact with the API to fetch updated data whilst your app is running.

Or you communicate with that API for user-created content, purchases or signup logic.

You get the best of both worlds therefore: Speedy delivery of SEO-tuned pages that don't need to reach out to an API right at the start just to get something onto the screen. But once loaded, you have a SPA with all its advantages and you can therefore provide a highly dynamic and reactive user experience.

This is actually exactly how academind.com works by the way!

This might be a strange trend but it's just so important!I already mentioned it earlier - frontend frameworks are now used for more than just web apps running in the browser.

We now have solutions that allow us to create mobile and desktop apps with these web technologies, too.

For desktop apps, you can use Electron, for mobile apps, you got Ionic, React Native and NativeScript.

These tools follow different approaches regarding how they achieve that these web technologies can be used to create native apps but they have one thing in common: They ensure that you can use your web dev knowledge to build cross-platform apps!

All these tools/ frameworks do a lot of heavy lifting behind the scenes to enable you to stick to the technologies you know (HTML, JS, CSS).

Being able to quickly build cross-platform apps (that can still tap into the advantages of the platforms they're running on) is invaluable.

It saves time, money and frustration and therefore it is very likely to stay a strong trend in 2019.

This might be a strange trend but it's just so important!Serverless does not mean that there are no servers involved anymore. It instead means, that you don't have to manage these servers.

You don't have to pay them either.

You only pay for what you use and you only deploy the code that contains your logic. Less boilerplate, more focus.

Serverless services typically follow an event-driven model. You deploy code and define when it should run (e.g. when a file is uploaded or when a certain Http request reaches an endpoint).

That code then runs and does its job. That's it!

It's a very simple yet powerful concept and it holds many huge advantages: Cost savings, time savings, separation of concerns, event-driven architectures and much more!

Serverless services are offered by all big cloud providers (AWS, Microsoft Azure, Google Cloud, ...) and we'll certainly see further strong growth in that area in 2019.

There are many reasons to jump into serverless development or at least have a brief look into it. Serverless backends also work great with the JAMStack by the way. The "A" would be your serverless API - for example built with AWS Lambda and AWS API Gateway.

This might be a strange trend but it's just so important!Machine Learning (ML), Artificial Intelligence (AI) and Bots - these are terms you encounter a lot these days.

There is a lot of hype around these topics but you can't doubt that ML and AI will change many businesses - it probably also holds opportunities for you, to serve your users or customers more efficiently.

It is not easy to tap into the advantages of ML/ AI in your own apps though. But there also is no single formula you could add or follow.

AI means many things. You can add a chatbot. You can label and scan uploaded images. All these things are already possible and thankfully, it becomes easier and easier to add such capabilities to your apps.

We got projects like tensorflow.js that help you build ML models with JavaScript. And we got ready-to-use services like AWS Rekognition and others (also on the other big cloud providers of course) to quickly add certain capabilities to our apps.

Definitely keep an eye on these technologies and explore them. Play around with them! There are many packages and services available which you can use without writing any complex ML logic.

Adding image recognition is only a few clicks away these days. Who knows what's really easy to do by the end of the year 2019!

Therefore, this is a topic to watch and explore in 2019!