What you need to know to develop a web application from scratch

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: This article will focus on developing web applications from scratch. About what is better to use for back-end development, and what – for the front-end part of applications.

Development of any web application consists of creating its front-end and back-end parts.

Front-end

Front-end is what the user sees on the site, its visual component. This includes HTML, CSS and, for the most part, JavaScript.

In modern development, the most popular frontend frameworks are Angular, Vue, and React. Each has its own pros and cons. But they are all JavaScript frameworks, since JavaScript is the undisputed leader in this area.

If you’re new to front-end development, the number of frameworks available may seem overwhelming to you. We won’t go deep into any other frameworks as that is beyond the scope of this article – but let’s say that choosing Angular will make your life a lot easier.

JavaScript. Fast start

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

Learn more

Of all the front-end frameworks available, Angular is probably the least time-consuming to learn. There are many factors that explain why Angular has a short learning curve, many of which we will look at next.

What you need to know to develop a web application from scratch

Convenient Angular CLI

Angular CLI is one of those things that keep the learning path so short. It can be shortened even further with third party apps like Angular Console (whether you’re new to Angular or not, you’ll love this app, but it doesn’t have to), which gives you a visual tool for the CLI.

One of the main advantages of the CLI is that it takes care of everything you need to do, from creating a new Angular project to deploying services, components, and more.

Many people like that for every new component, service, pipe, etc., the CLI creates a corresponding test. It also gives you a standardized way to run all tests. This gives you additional flexibility – you know that there is a test in every new file, and you can update the tests at any stage of development.

Angular standards

The CLI has another added benefit – it’s very specific. This is a problem for some people, but it should actually help you.

When you use the Angular CLI, it automatically sets its own set of standards for the project – essentially taking the right steps for Angular. This will help you avoid a lot of mistakes, especially when you include a project.

This is useful when working with a team or connecting a new member. If they are familiar with Angular, they already know how to accept your project and will be effective in a much shorter time frame.

What you need to know to develop a web application from scratch

TypeScript

Angular uses TypeScript natively, which can be a huge advantage for many – it gives you the ability to apply a brilliant type system to your JavaScript code (if you’re working with typed languages). If you are a .NET person, you will definitely love it.

Even if you’ve never written a line of code in your life and want to get started, TypeScript is a pretty good first language. It will introduce you to many OOP principles that you can directly translate into other languages, which you won’t be able to do with JavaScript.

Component Libraries

In fact, all frameworks have many component libraries, however, the Angular team created Angular Material. If you are not familiar with it, we will tell you a little from the history.

In 2014, the good folks at Google created a design language called Material Design. If you’ve ever used Gmail, then you’re familiar with this type of design. He immediately became very popular.

Angular Material is Google’s unique Material Design implementation for Angular, which is great. It encapsulates and standardizes most of the components that are required to build any site or application. If you do not find the required component in it, you can easily create it.

If we talk about examples of sites using Angular, then we can cite such popular resources all over the world: Netflix, PayPal, Lego, The Guardian.

Backend development

The back-end part of the application is its logic of work. This is server-side development. It implies the development of the logic of your site, interaction with the database, payment systems, and everything that should be on the server.

What you need to know to develop a web application from scratch

In backend development, you can choose from a wide variety of languages ​​to suit different needs. You can write this part, for example, in PHP, Java, Node.js, Python, Ruby, etc. And if PHP is the language of choice for it, then the Laravel framework is an excellent choice.

The complexity and functionality of web projects is increasing all the time, and no one has the desire to write all the necessary code from scratch. Programmers need to develop complex websites and web applications, and this usually takes a very long time. To make the development process easier for programmers, they began to create frameworks.

Laravel is a web application framework with an expressive and elegant syntax. It will simplify the solution of basic painful tasks, such as authentication, routing, sessions, caching, application architecture, working with a database, etc.

What you need to know to develop a web application from scratch

A detailed look at Laravel is beyond the scope of this article, but here we look at the benefits of the framework and discuss why it would be the best choice.

The main advantages of Laravel:

large ecosystem with instant deployment of its platform;

the official site provides many manuals and information for review;

Laravel documentation is close to perfect;

JavaScript. Fast start

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

Learn more

has its own engine for Blade templates;

“Beautiful” language syntax that facilitates the execution of the necessary tasks (for example, authentication, session, caching and RESTful routing);

own ORM – Eloquent ORM, which offers simple and convenient tools for working with databases;

excellent request routing system.

Separately, it should be said about the advantages of built-in mechanisms.

First, Laravel has a clear exception handling mechanism.

Secondly, the integrated authorization and authentication mechanisms can be reconfigured for specific requirements.

Thirdly, this framework provides convenient mechanisms for caching Internet applications.

Speaking of the benefits, it is also worth recalling the simplicity and availability of the software interface for sending mail via a cloud or on-premises service.

Finally, this framework provides free access to billing services with Braintree and Stripe subscriptions.

Popularity

To assess the popularity of the framework, we suggest referring to several sources of statistics.

Popularity based on query statistics provided by Google Trends:

What you need to know to develop a web application from scratch

As you can see from the graph of the popularity of Google Trends, the Laravel framework takes a confident first place and is constantly gaining popularity without slowing down. Which, in general, is very good – considering that these are global statistics.

If we take the statistics of queries in Google Trends for Russia, then the picture will not change much:

What you need to know to develop a web application from scratch

As you can see from the graph, in 2016 Laravel took over the leadership from the Yii2 framework and not only continues to hold it to this day, but is also gaining popularity.

This means that most of the new projects in the country are now created using the actively developing Laravel. Considering the trends and choosing Laravel as your framework for developing the back-end portion of your web application, you are doing the right thing!

Video presentation of the course “Laravel + Angular. Creation of a CRM system “

The release of the course “Laravel + Angular. Creation of a CRM system “
will take place on June 22, 2021.

The first 36 hours of the course will be sold with additional bonuses and a 40% discount!
To get a 40% discount and bonuses, sign up for the preliminary list

How do you want to enroll?

  • In contact with
  • by Email



Sources:

https://blog.usejournal.com/why-you-should-choose-angular-for-your-next-front-end-project-d4dffbae8b07

Follow us on Telegram, VK, Yandex.Zen

JavaScript. Fast start

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

Learn more

Laravel framework. Fast start

Create your first Laravel web application

Watch the video

Leave a Reply

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