The traditional concept of web development (from 10 years ago) is page-oriented.

When you build a website or an application you would think in terms of the pages — how many pages you need, how they should relate to each other etc.

Every single page may have its own js/css dependencies or global dependencies, depending on features and functionality. So finally the page may end up with something like this:

This solution is hard to scale because loading too many scripts can cause a network bottleneck. The second option is to use a big .js file containing all your project code, but this leads to problems in scope, size, readability, and maintainability.

And when you need to deploy the app — you have to copy all of the .html, .js and .css files to a production environment, which might be dozens or even hundreds of files.

And lastly, to host all of your application files you need a server (it might be a pretty heavy one), which can manage the folders structure, handle routes and so on.

Today is 2019 and we don’t do that anymore.

Modern web development

Today we don’t think in terms of the pages. We think in terms of components.

A component is a functional element which represents some functionality: it might be a form, a button or a set of other components.

This gives you much better flexibility for sharing and re-using the functionality. The concept may sound familiar to those who work with Service Portal widgets, but the key difference is how you develop, use and share components.

The key difference between traditional and modern paradigms is a development pipeline. There is one additional step, called ‘packaging’, where we build or package the application.

Application packaging compiles all components and their dependencies into a very small set of files, the final package might be just two (html+js) or three files (html+js+css).

This may sound unnatural to many people, but that’s how modern web development pipeline works — your entire web application (multiple pages, forms, layouts, routing, <pick your feature>) will be bundled into one .html and one .js file (css may be packaged inside js).

Packaging is very important because you do not just concatenate .js and .css files — you transpile, transform and optimize your code. Which makes it more efficient, fast and reliable. And that also allows you to use the most recent features of javascript like ES6/ES7/ES8, so you are literally working with the most modern web technologies.

All the top javascript frontend frameworks and libraries— React, Vue and Angular, based on the component development approach and application packaging.

Another key difference with the traditional concept — you don’t need a heavy server to host the application since it’s just a few files. You may not need a traditional server at all. Because the only thing you need is to send those two or three files to the browser, and the browser will run the application.