6 impressive web technologies of 2015

2015 turned out to be rich in innovations related to improvements to the web platform. Axel Rochemayer considers 6 technologies that seem to him the most interesting:

1. Electron;
2. React Native;
3. Progressive web applications;
4. Visual Studio Code;
5. Rollup;
6. WebAssembly.


')


1. Electron

Electron is a technology developed by GitHub. It allows you to build cross-platform desktop applications using web technologies. Among her features:

• automatic updates;
• error reports;
• Windows installers;
• debugging and profiling;
• native menus and notifications.

The technology was originally created for the Atom GitHub editor, which is currently used by many companies, including Microsoft (in Visual Studio Code, which will be discussed below), Slack and Docker.

The Electron architecture includes both the Node.js runtime environment and the Chromium embedded browser. Applications made using this technology are executed by several processes: the main process runs the script from the package.json file. This script can open windows to display the user interface. Similar to tabs in a web browser, each of the windows performs a separate process - rendering.

2. React Native

React Native allows you to develop native iOS and Android applications using React. The location of the virtual DOM remained unchanged, and you still need to use JSX to create it. But now the UI is built using native components, such as UITabBar for iOS and Drawer for Android. The location of these components is configured using the Flexbox.

On the one hand, this means that each of the platforms has different UI layers: web, iOS and Android. On the other hand, you will have the opportunity to reuse most of the code and gain experience in native development for each of the platforms.
I am usually skeptical about transferring a language from a native platform to another. But a few months ago, evaluating React Native, one iOS developer stated :

"Perhaps I will no longer write an iOS application on Objective-C and Swift."

This is remarkable because he had to learn both JavaScript and React before he could work productively with React Native.
Another interesting statement belongs to Andy Matuschak, a man from the UIkit team who helped develop iOS from version 4.1 to 4.8:

“As the author of UIkit, I can say with certainty: for the UI-layer, the React-model is much better than the UIkit model. React Native is a great thing! ”

3. Progressive web applications

In some ways, native applications have already caught up with web applications: an example of this is the use of indexing and deep linking technologies. Progressive applications are not so much technology as generalizations of the characteristics of modern web applications. This may mean that in some areas of the web application are in step with the native, in others - they are overtaken:

• Method of gradual improvement: the application uses as many environments as possible. If any service is needed, the application applies what is available, or stops working correctly if nothing is found.
• Adaptive user interface: the application adjusts to different input methods (touch, speech, etc.) and data output (different screen sizes, vibrations, audio, braille displays).
• Connection independence: the application is offline when the connection is interrupted or completely absent.
• UI tailored to the application: the application adopts the UI elements of the native platforms, including the fast loading of the user interface, which can be archived by caching assets using the Service Worker.
• Permanent updates: Service Worker API defines the process for automatically updating applications.
• Secure connection: Uses the secure HTTPS communication protocol to prevent snooping and attacks.
• Application Discovery: Metadata, such as the W3C manifests of a web application , allows search engines to find web applications.
• Interaction push-notifications: they help users keep abreast of events.
• Native installation: on some platforms, you can install a web application that is no different from the native one (icon on the main screen, separate position on the multitasking panel, browser UI is optional).
• Linkage: the ability to easily share applications by URL and run them without installation.

I decided to talk about progressive web applications, because I like all the above-mentioned techniques and technologies, but I’m not completely sure what exactly the difference between progressive web applications and modern web applications is. The only thing that comes to mind is web application installation banners. The main feature is that these applications do not need banners.

For further reading:

• Progressive Web Apps (Google site);
• Andrew Betts article “Progressive apps” are a bag of carrots . Andrew is critical of progressive web applications as a brand and begins an article with its analysis.

4. Visual Studio Code

Visual Studio Code is a JavaScript code editor, a cross between integrated development environments and text editors, which, in my opinion, has a good reputation. Its advantage is also that it is written in JavaScript and is based on Electron. In 2015, VSC received the status of open source software and acquired extensions.

5. Rollup

Rollup is an ES6 module builder that converts them into a separate assembly, which is a module in ES6 or CommonJS format. Thanks to Rollup, 2 innovations appear in the world of JavaScript modules:

• The resulting assembly consists only of used exports thanks to the tree-shaking technique. This technique essentially depends on the static structure of the ES6 modules. A static structure means the ability to analyze at compile time without using the export code. The elimination of unused code allows you to change the size of the modules without worrying about the size of the assemblies.
• Rollup clearly shows that ES6-modules can be packaged in ES6-format, bypassing any custom loading.

For further reading:

• The Rollup Guide;
• Tree-shaking with webpack 2 and Babel 6;
• The future of bundling JavaScript modules.

6. WebAssembly

WebAssembly is a binary format of a static formal language derived from asm.js, which can be used to create dynamic executable programs supported by JavaScript engines. Formal language is higher-level than bytecode, so it is easier to maintain. Output files exist within the framework of JavaScript and, as a result, are well integrated into it. Taking into account the speed of asm.js, the speed of the compiled C ++ code in the Web Assembly will be approximately 70% of the speed of compiling C ++ into native code.

It is likely that soon the Web Assembly will support JavaScript OOP and will become a universal virtual machine for the web.

For further reading:

• WebAssembly: a binary format for the web.