Web Development in 2020 – Looking Ahead …

From the Author: Webpack is a JavaScript module bundler that transforms web resources such as HTML, CSS, JavaScript, and SVG files and bundles them into a smaller group of files.  Webpack also helps with chunking (splitting into smaller chunks) and managing code dependencies to ensure that the code that needs to be loaded first does this.  How webpack works In this article, we'll go over some of the new features to look out for in webpack in 2021, but first we'll look at what's new in webpack in 2020.  webpack V4 - V5: Important Changes In October 2020, a newer version of webpack was released: webpack 5. This version removes all deprecated elements in V4 and fixes critical bugs to bring the webpack architecture up to par for future improvements.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn more Other interesting features in version 5: Long-Term Caching Support - New algorithms to support long-term caching are enabled by default in production mode.  The real hash of the content - previously only the hash of the internal structure was used in webpack.  Webpack 5 will use the real hash of the file content when used [contenthash], which will have a positive effect on long-term caching when only small changes are made to the file.  Modular structure - webpack 5 came with a new feature that allows multiple webpack builds to work together.  See here for the complete changelog.  While 2020 has been a big year for webpack, there is still a lot more to come, which we'll talk about in the following sections.  Please note that these updates are subject to change based on the ever-changing world of web developers.  Webpack roadmap 2021 Improved ESM support Since the ECMAScript Module (ESM) was introduced in 2015, it has become the standard mechanism for code reuse in highly fragmented JavaScript applications.  To improve ESM support, the webpack team is planning to make some important updates.  Self-executing snippets One of the most interesting features of webpack is code splitting.  This feature allows you to split your code into multiple packages that you can download on demand or in parallel.  At the moment, dynamically loaded fragments in webpack usually serve as a container for modules and never execute module code directly.  For example, writing: JavaScript import ("./ module") 1 import ("./ module") Will compile like this: JavaScript __webpack_load_chunk __ ("chunk-containing-module.js"). Then (() => __webpack_require __ (" ./module ")) 1 __webpack_load_chunk __ (" chunk-containing-module.js "). then (() => __webpack_require __ (" ./ module ")) In most cases this cannot be changed, but the webpack command considers some cases where webpack could generate a block that directly executes the contained module.  This can result in less code generated.  ESM imports and exports While there is already a plugin for generating ESM exports, the webpack team is considering adding built-in support for this feature, which may be useful when you decide to integrate webpack packages into ESM boot environments or inline scripts.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn More The command also takes absolute URLs into account when importing.  This is very useful when using external services that offer their APIs as EcmaScript modules.  Here's an example: JavaScript import {event} from "https://analytics.company.com/api/v1.js" // Changes to: import ("https://analytics.company.com/api/v1.js" ) 12345 import {event} from "https://analytics.company.com/api/v1.js" // Changes to: import ("https://analytics.company.com/api/v1.js") Such the function will help to gracefully handle errors with external dependencies.  ESM Library The webpack team will also try to improve the bundling using the ESM libraries and will add a special mode that does not apply chunking, but instead generates rendered modules that can be plugged in via ESM imports and exports.  This means that as long as loaders, graphics modules, and resource optimizers are running, no fragment graphs will be created.  Instead, each module in the modules graph will be released as a separate file.  Strict Mode Caveats Sooner or later, the webpack team plans to ensure that all contained code is put into strict mode when the ESM package is created.  While this may not be a problem for many modules, there are a few older packages that may have problems with different interpretations, so it would be nice to see warnings for them.  SourceMap Performance SourceMap provides a way to map code in a compressed file back to its original position in the original file.  In other words, it links the minified version of the resource (CSS or JavaScript) to the original authoring version.  This utility helps you debug applications even after resources have been compressed / optimized.  Using SourceMap in webpack is currently quite expensive due to performance issues, so the webpack team will be looking to improve this in 2021.  They will also be looking to update / improve the terser plugin, which is the default webpack minifier in webpack 5. Package.json export / import field Node.js v14 came with support for an export field in package.json.  This feature allows you to directly define entry points for a package, or conditionally define entry points for each environment or JavaScript flavor (TypeScript, Elm, CoffeeScript, etc.).  In a later release, private imports were also supported in Node.js (similar to the export field in package.json).  For now, webpack 5 only supports the export function, even with additional conditions such as specifying production / development.  Import fields for private imports are another feature to look out for in 2021.  HMR for Modular Design Hot Module Replacement (HMR) works by replacing, adding, or removing modules while the application is still running, without the need for a complete reboot.  This can significantly speed up development by preserving application state that would have been lost on a hard reboot.  Plus, it instantly refreshes the page when changes are made to the source code, much like changing styles directly in the browser developer tools.  Webpack 5 ships with a new feature called “Module Federation”.  This feature allows you to integrate multiple assemblies together at runtime.  HMR currently only supports one assembly at a time and updates cannot move between assemblies.  The webpack team will work to improve the HMR updates to move between different builds, making it easier to develop federation apps.  Hint System To monitor errors and warnings, the webpack team is considering adding another category for the user: hint.  Similar to displaying errors and warnings, a tooltip notifies the user of information that may be of value to him.  However, unlike the previous categories, the prompt will identify optimization opportunities or tricks, not problems.  An example hint might look something like: "Did you know that when you add X a change to file Y, you can clean it up?";  or "Easy to encode the space with the space function."  WebAssembly According to the official documentation, WebAssembly (abbreviated Wasm) is "a binary instruction format for a stack-based virtual machine."  This means that you can build your software with programming languages ​​like Rust, C ++ and Python and provide it to the end user in a browser with near-native performance.  In the current version of webpack, WebAssembly is experimental and not enabled by default.  The default support is what the webpack team will hopefully add this year.  Conclusion There are big changes coming to webpack in 2021, and while this list may not be final, we can look forward to new features and capabilities that will make webpack easier and more efficient.  Author: Elijah Asaolu Source: blog.logrocket.com Editorial: The webformyself team.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn More Webpack.  The Basics Watch the Webpack Video!  Look

From the author: Happy New Year everyone! Since the publication date of this post is January 1, 2020, I think now is the time to talk about some personal web development predictions for the next 366 days! Because, yes, 2020 is a leap year!

A quick disclaimer first before we get to the actual content. Obviously, I don’t know what the real future will look like, and I also don’t have complete analytic data on which to base my assumptions. Everything written here is just my point of view, my personal thoughts on where web development is going. All of this is based on my experience and observations. If you disagree with something written here – good! Feel free to share your opinion in the comments section if you like!

TL; DR:

JavaScript and top 3 front-end frameworks remain valid;

Svelte is on the rise;

Cloud computing, server-side programming and JAMStack are evolving;

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

Pre-processing and performance improvement are the future;

WASM brings a lot of processing power to the network;

Material Design, rounded corners, gradients and dark mode are current design trends.

JavaScript

Some people like it, some people hate it, but as a person belonging to the first group, I’m happy to say that JavaScript remains. Not only in principle (this is obvious), but also as one of the most popular and universal programming languages. Its ubiquity on the Internet, on computers, on mobile devices, on servers, and even in the Internet of Things (IoT), and its dominance in open source will only grow.

TypeScript

But JavaScript is not alone in this. Besides HTML and CSS, there are many JS compiled languages. Of all of these, TypeScript is the most prominent. It has recently become wildly popular for all the benefits of static types. While it won’t become a W3C standard anytime soon, JavaScript itself thrives on such inventions. I use TypeScript in literally all of my projects, and I expect a lot more people to do the same in 2020.

Changes

There is also something for those who have a different attitude to JS than I do. While JS isn’t going anywhere for the foreseeable future, who knows what a decade will bring us? At this point, I can only say that there may be some small changes in the main emphasis of programming languages. We will talk about it later.

UI libraries / frameworks

So in early 2020, I have my own open source JavaScript framework that will crush React, Vue and Angular and become the new industry standard!

Ok, maybe I’m exaggerating a little! In fact, the main trio isn’t going anywhere. The sheer size of their ecosystems and communities simply cannot be ignored. They won’t be defeated just like that. React is pretty much the jQuery of our time (in a positive way in terms of popularity), Vue is getting great new features and improvements with v3, and Angular … well, it’s just Angular – you know what I mean.

Svelte

But a new player has appeared on the field, which cannot be left unmentioned. It’s called Svelte and is currently gaining traction. Many even believe that he will compete with the “main guys” in 2020.

Personally, I think Svelte will have a hard time meeting such high expectations. I hope I’m wrong because his approach to creating interfaces is very innovative! I am talking about preprocessing the code in an extra compilation step to provide smaller and more efficient client packages. The development of JS has led to serious abuse of its capabilities. If Svelte takes off, we should see further development in preprocessing, which will be good for both developers and users.

Server side and cloud

With Svelte in mind, it’s safe to say that more and more computers will move away from the client. A concept that is already well known in the form of a cloud. We have cloud computing (like AWS), cloud gaming (like Stadia), cloud storage (like Google Drive) and many other services and tools that build on this idea. And now he’s making his way into web development!

Cloud

We are already used to using cloud services and third-party APIs to speed up the development process and provide certain features. Depending on many of these APIs from trusted providers, our software is not only more secure, but potentially even more efficient (compared to anything done on the client side). As such, I think the overall dependence on cloud services will grow in the coming years.

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

Static sites

But I would also like to touch something other than the cloud. The concept of preprocessing and the extra compilation step for which tools like Svelte are so well known. There are many untapped performance benefits to achieve before reaching out to a customer. For example, SSR and JAMStack have been very popular for several years. They provide great client-side performance, SEO, and a host of other benefits without much effort. JavaScript is still used, but to a lesser extent.

Preliminary processing

This is all great, but static websites lack some of the functionality that dynamic websites have, and SSR usually requires a fairly powerful server to run. Added to this is the fact that client code is still required to perform many other tasks and can sometimes become a bottleneck. With that in mind, I think preprocessing, similar to what Svelte does, but on a code-wide basis, will get more attention.

Maybe you’ve heard of Facebook’s open source project called Prepack, which is for partial evaluation of JS code? In its final form, it should be able to preview your code and preprocess it, leaving highly optimized results. The project is currently in its early stages and has stalled, but I think it illustrates the general idea quite well.

Performance

Besides preprocessing and optimization on the server side, there is also room for improvement on the client side. Thanks to its rapid development, JS is now used to solve rather complex problems for which it was not originally intended. Sure, the language and its syntax are good (although sometimes cumbersome), but I want to focus more on the performance and execution side of things.

V8

Google V8 is by far the leader in the JavaScript engine market. Latest features, top performance and all the good stuff. He was also the first to give us JIT compilation, which greatly improved the runtime of the JS code. It is because of this progress that JS is currently one of the fastest scripting languages ​​on the market!

WASM

With that said, there are limits to what JS can do. This is why WebAssembly (WASM) was created. It is basically a highly efficient format for compiling languages ​​like Rust and C ++. Depending on the application, it can be orders of magnitude faster than JS, making it an ideal choice for portable computing tasks.

It is important to know that WASM is not meant to replace JS. Instead, it will solve all the complex problems and allow JS to focus solely on the user interface. With its impressive performance, we will finally be able to create heavy applications (especially games) that will run everywhere and impress users with their responsiveness!

Since the introduction of the Minimal Viable Product (MVP) in 2017, WASM has been slowly but successfully acquiring new features. On December 5, 2019, W3C officially approved WASM as the fourth language for use on the Internet. But it can also be used outside the browser as portable modules. With all this and the growing support, it’s easy to say that WASM will receive even more attention in the future. And who knows – maybe in a few years we will be playing AAA games right in our browsers!

Design

Finally, I would like to conclude these predictions of mine by highlighting some design trends. You should know that while the code is very interesting and important, the user pays the most attention to the design and user interface.

Material Design

I don’t think there will be any dramatic changes in design trends this year. And no – skeuomorphism will not return. As in previous years, Google Material Design (MD) will lead the way. However, due to the need for customization, things will look a little different.

Rather than strictly following Google’s guidelines, different brands will use specific design techniques and apply them to shape their unique looks and stand out from the competition. However, things like rounded corners, gradients, bright colors, and dark mode will become commonplace. In addition, simplicity, user experience (UX) and mobility will be back in the spotlight.

Availability

Beyond visual material, the importance of accessibility is likely to increase (a11y). The internet is becoming more and more crowded with different people, and providing a good experience for everyone should be the main goal of designers.

Especially more versatile websites such as social media and news portals need to provide people with disabilities with ease of use. However, the a11y goes far beyond that, enhancing comfort even for casual users thanks to subtle details like keyboard button responses, touch gestures, and more. The more of these functions a website implements, the more likely it is that the user will like it.

The word is yours

So these are my top web development predictions for 2020. Whether you agree with them or not, I would love to see your constructive feedback and personal predictions in the comments section below!

Author: Areknawo

A source: //areknawo.com

Editorial staff: Webformyself team.

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

Want to know what it takes to build a website?

Watch the video for a step-by-step plan to build a website from scratch!

Watch the video

Leave a Reply

Your email address will not be published. Required fields are marked *