Front-end cutting-edge technology

Note: This article is my "cutting-edge software technology," large operations, just a simple introductory presentation, please point out if there is an error
with the advancement of technology upgrades and user experience, browser emergence of more and more technology. Also began covering the front end to the server field, moving from the end of a decade ago in the pages of pure HTML and CSS technologies. Here to introduce a few trend is likely in the next few years, bringing innovative front-end technology.

One, PWA

Mobile applications more and more important in our lives, faster application launch native APP rendering speed, but often need several sets of code to adapt to different operating systems and device types, users also need to take the initiative to update the version of the software. Thus emerged a front end similar to React Native Weex framework and platform, with JavaSript script to call the appropriate native interfaces, we can use the web programming language while adapting Android and IOS system. But the disadvantage of this approach is also evident, they write out the application loading and rendering speed is slow, the user does not experience a sense of perfection. There are way webView embedded in a web page instead, its disadvantages are also obvious, is not to interfere with the operation content native, no network, then can not use, there is a white screen time, and can not be achieved on the user's design experience optimal.
PWA is a progressive full WEB applications, Google is the future of the idea put forward at an early age. Traditional web browser must support to the browser, if the web browser application to remove the shell, the user's perspective, we can achieve and desktop software, mobile applications like visual effects. Similarly, desktop applications can also achieve this effect. It is with the HTML5 App Manifest and Service Worker to achieve offline caching and message push, so do not worry about the absence of a network situation will be blank, to the effect of APP class.
Currently Google browser can run in test mode PWA application, the earliest there hungry, it developed its PWA version of the application in the next few years, this technology will be used more and more.
PWA and APP conventional, traditional desktop application, compared with all the advantages of web applications, there is no native APP various startup conditions, it is possible to quickly perform the corresponding user's instruction, the user need not manually update, but its current home each production support are all not very extensive.

二, webAR

AR technology now more and more fire, we naturally hope to be able to use the technology in use to facilitate the spread of the page, so some people put forward the concept of web VR and web AR.
AR can simply be considered a real-time virtual image overlay technology in the real scene. There are currently two ways to achieve the AR method, one is an optical see-through, and the other is a video see-through. The optical type is real time perspective it appears on the screen in front of effects, so that real and looks into one, so that the advantage of higher fidelity. Video see-through is the real-time scenes are recorded, and then combined to generate special effects and so the advantage of a high degree of synchronization, may further process the results generated by the user's needs. With current technology, the front-end in order to achieve AR, can only rely on the video see-through.
Web AR specification is proposed by W3C organization in 2017, to achieve the AR in a Web page, a problem to be solved is to capture real-time screen objects, Google's AR team like web provides WebARonARKit and WebARonARCore two libraries, two libraries can help us to track movement, perception and sense of the environment to light.
At present, a programmer named Jerome Etienne encapsulates a web AR library --AR.js, we can use it with just ten lines of HTML technology has achieved the AR 60FPS. It is mainly to provide real-time capture WebRTC, the largest open source framework JSARToolKit AR and several WEBGL the library package.
The future for its performance, but also has greatly improved, there have been many methods such as the use of Web Worker, WebAssembly of. In the future there will be more and more people will join the ranks come.

三、WebAssembly

As a rule of web programming JavaScript army in position for a long time, with obvious shortcomings, its syntax is flexible and therefore not suitable for large applications, its performance is not suitable for handling large amounts of computing.
Let JavaScript weakly typed flexible, with the front-end logic increasingly complex, it creates tools such as TypeScript, Flow have to make JavaScript more constraints, to reduce the possibility of error.
But TypeScript, the Flow essence or JavaScript, they are mostly a process of transformation, there is no reduction in the compilation process of the browser, so the speed and improve performance, there is no great help. Although Google, Firefox have put forward their own solution, but failed to get a wide range of unity.
WebAssembly bytecode is a new specification, it is equivalent to compare JAVA or JAVA byte code as the browser it is easy to read. When the browser to interpret JavaScript, you need to run in order to know its type, then the result of the judgment, to its abstract syntax tree is parsed into intermediate code, the underlying order to know its meaning. WebAssembly as a "midamble" processes can be omitted. The same logic code, it requires the volume is also smaller. Currently the most used browser in the JavaScript compiler is JIT, in order to allow it to perform JavaScipt more quickly, it will be some analysis and optimization, and WebAssembly these processes may be omitted entirely. On garbage collection, WebAssembly promote the recycling of waste space to write code developers, do not always have to waste time checking. For these reasons, it is up and running more quickly than JavaScript.
Currently WebAssembly can be converted to a variety of languages, the official recommended to use C / C ++ to program. WebAssembly can be used on web 3D rendering calculations game, and now our game engine egrets have been slowly groping. There is a virtual DOM diff algorithms React framework of the large number of calculations, After rewriting it can greatly improve efficiency. For pages in the processing of the audio and video, it can also be used to improve the efficiency WebAssembly calculated.

四、CSS houdini

There are many proposals to imagine stunning CSS field, but after the new CSS standards are often put forward to the beginning of the browser support in a few years, as it relates to the bottom of the browser, the browser business. But comparing the JavaScript community is very active, because they have the tools can be transformed translated into lower version. However, many of which are CSS-compatible browser can not support.
Welcome CSS preprocessor let us hope more urgent CSS also support some dynamic language wording. Although the nature of CSS preprocessor just been converted and syntax between different pre-processors are also different, nor does it solve the browser compatibility issues. So houdini appeared.
W3c CSS Houdini is a commitment to resolve browser compatibility issues team, and now they raised several draft, and extended support is a function of variables CSS, CSS Typed OM helps us better in JavaScript, more convenient to acquire style, Paint API so that we can use our pattern drawn in JS directly in CSS, layout API can help us use compatibility not-so-good display layout in CSS, so that we can rest assured that the use of bold new layout .
They are directly from the browser kernel to start, during every step of the browser page rendering process conceals different "hook", thus increasing our control over the rendering to the browser, it can also save a lot of wasted time effort. CSS Houdini also used worklet this concept, it is considered a lightweight Web Workers, open up a new thread dedicated to their rendering.
The latest version of the Google browser has begun to support part of the API CSS Houdini, I believe that in the near future, CSS community will begin to slowly come alive.

Guess you like

Origin www.cnblogs.com/rimochiko/p/12641002.html