Instead, Svelte works at build time, converting your components into highly efficient imperative code that updates the DOM with surgical precision. As a result, you can write ambitious applications with excellent performance specs.

The first version of Svelte was dedicated to testing a hypothesis – that a purpose-built compiler can generate reliable code and provide a great user experience. The second version was devoted to small improvements that tidied up a number of things.

Svelte’s pros

• high performance
• small size of the final code
• ease of use for beginners

And what about the disadvantages, are there none at all? Alas, unfortunately, this framework is quite young and has not yet received due attention from the developer community. This means that the word svelte is almost never heard in the offered vacancies. Entering the labor market with a skill that is not in demand yet is not what beginner frontend developers need. The framework hasn’t yet achieved the necessary popularity to count on the support of the big players in the IT sphere, like Angular or React. And without that, it doesn’t have extensions for code editors, ready-made component sets. But Svelte has an active developer community on github, where you can always ask for help or contribute to the development of this technology.

Unlike its brethren, Svelte doesn’t use virtual DOM and still outperforms them in terms of size and performance. The conclusion is self-evident – virtual DOM is certainly a cool thing, but not a panacea. It turned out that you can achieve high performance without virtual DOM. Over the past few years, new JavaScript frameworks have been appearing every now and then, rapidly gaining popularity. Such an invasion of frameworks always puts newcomers in a stupor. Experienced developers regularly hear the same question: I want to become a frontend developer, but I don’t know where to start. There’s so much to learn, it’s overwhelming.

The post What is Svelte? appeared first on An-Gular 2Learn.

Since Vue works only at the “view layer” and is not used for middleware and backend, it can easily integrate with other projects and libraries. Vue.js contains extensive functionality for the view layer and can be used to create powerful single-page web applications.

Vue.js features:

• Reactive interfaces;
• Declarative rendering;
• Data Binding;
• Directives (all directives are prefixed with “V-“. A state value is passed to a directive, and html attributes or Vue JS events are used as arguments);
• Template Logic;
• Components;
• Event Handling;
• Properties;
• CSS transitions and animations;
• Filters.

The core Vue.js 2 library is very small (only 17kB). This ensures that the load on your project implemented with Vue.js is minimal and your site will load quickly. Download the corresponding .js file at the link.

Where Vue.js is used

Vue is suitable for small projects that need to add some reactivity, present a form using AJAX, display values on user input, authorization or other similar tasks. Vue scales easily and is well suited for high-volume projects, which is why it is called a progressive framework.

Vue is also great for large single-page applications due to its core components such as Router and Vuex. With Vue, you can both use public APIs to build applications and implement server-side runtime applications. But Vue is best suited for developing solutions that use external APIs to process data.

You can also use Vue to create a blog frontend on popular CMSs. Vue.js is also great for developing dynamic interfaces that adapt to the user.

The post Description of the Vue.js framework appeared first on An-Gular 2Learn.

This can include the following points:

• Transmission of data of unidirectional type. Properties will be passed from the parent component to the children. They will receive properties as a set of immutable values. This results in the component not being able to directly make adjustments to the available parameters.
• Presence of virtual DOM. React has been assigned its own virtual DOM. The technology creates a cache structure in the memory of the involved device, which allows for a calculation between the previous and current states of the interface.
• Availability of JSX. This is an extension of the JavaScript syntax that makes it possible to apply HTML-like syntax to describe interface structures.
• The use of lifecycle methods. They help the programmer to run codification at different stages of the “life” of an application component.
• Not only rendering HTML in the browser.
• Presence of React Hooks. Due to Hooks, you can use states and other features of the studied technology without writing classes in the code.

All this makes React a convenient and functional tool for user interfaces of various complexity. The main thing is to learn how to use such a library. The official documentation and tutorials will help to understand the issue from scratch.

The post Features and nuances of React appeared first on An-Gular 2Learn.

It is a library for creating user interfaces. It has an open source code. React first appeared in 2013. Acts as a cross-platform library.

React can be described as:

• a web framework;
• a library of functions;
• JS library.

Now this component has support and is also being developed by Facebook and Instagram. They are helped by a community of independent developers and organizations.

History of appearance

React technology was developed by one Jordan Valke. This is one of the software developers in the Facebook Corporation. This is the name given to the PHP component-based HTML framework.

React was initially used in the Facebook feed in 2011. It was later implemented in the Instagram feed. This happened in 2012. The source code became open source in May 2013 at a conference called JSConf US.

React Native was announced at the React.js Conf conference in early 2015. Its source code was opened by developers in late spring of the same year. The corresponding component makes it possible to develop native applications with React that run on iOS, Android, and UWP.

And in 2017, a rewritten and optimized version of React appeared, called React Fiber. This is the foundation for all future features as well as existing improvements.

What to know before using it

Before you start working directly with React, you need to prepare yourself. It is not so easy for beginners to deal with it at once. Beforehand, the developer needs to familiarize himself with the concepts and basics of working with:

• HTML;
• JavaScript;
• classes;
• objects;
• functions;
• arrays.

Once the basics are in place, you can start creating user interfaces with React.

The post What is React appeared first on An-Gular 2Learn.

Angular is no longer just a library for working with the DOM, but a full-fledged framework that is guided by the principles of MVVM application development and includes out-of-the-box features such as

• CLI for generating the file structure of various Angular constructs, npm library structure, testing, linting, etc.
• A number of libraries for a wide variety of tasks – router, libraries for working with forms, animation, and others.
• When initializing a project, you can fine-tune what of the available libraries will be added to it.
• Linking tools.
• Karma + Jasmine for Unit and End to End testing.

Historically, Angular, although it appeared a little later than React, is actually a rewritten from scratch version of the AngularJS framework that existed before it. At the beginning, there were even some misunderstandings among front-end developers, as no one understood the difference between the names Angular and AngularJS.

As a result, the framework’s development team started using the names Angular version 1 (for AngularJS) and Angular version 2 (for Angular) to distinguish them more clearly.

If you compare Angular with React, its structure is much more complex. In addition to components, the following elements also appear here, each with its own purpose:

• Pipes – a kind of auxiliary functions for transforming the visual appearance of data in HTML templates. For example: formatting numbers, dates, currencies, etc.
• Directives – classes that are used to provide additional functionality to other elements of the application. They are also divided into several types, depending on the form of interaction with the elements (I’ll skip this point to avoid going into details). They are mainly used as custom attributes of markup elements.
• Components are elements for visualizing data. They combine styles, an HTML file with markup, and JS or TS with component logic.
• Services – for the possibility of centralized data storage and utilitarian methods. They can be used by Pipes, Directives, Components, and even other Services by adding them using Dependency Injection.
• Modules are a way to group all of the above elements. In most cases, by functionality or pages.

To dilute this flow of information a little bit visually, below is an example of the same simple “Hello World” application as in the section on React, but implemented with Angular.

It is worth noting that simply adding a link to the library in index.html will not do. The example was preceded by initializing the project structure using the Angular CLI. The structure already has all the necessary files (including the root AppComponent, which I built as a simple example) with the application binding to the DOM, as well as the settings for linters, tests, Typescript, and the like.

The post Angular appeared first on An-Gular 2Learn.