imweb2017 conference personal summary
PWA vs AMP - The Present and Future of the Mobile Web
The advantages of mobile web over native apps are these:
- cross-platform reach more users
- Instant update and more flexible, bugs can be fixed.
- native apps have to be designed and developed for different platforms Mobile web has less work to do
Today in mobile internet, mobile traffic is much more than Desktop and is more concentrated on Apps than mobile web and is Top3 Apps. how to try to reverse this trend?
AMP (Accelerated Mobile Pages)
AMP is an open source project on Github that aims to accelerate the loading of web pages on the mobile web thereby enhancing the experience. It mainly includes these three aspects:
- AMP runtime. it defines a new set of HTML tags such as amp-img, amp-video. using these tags ensures smooth loading. Also amp is responsible for managing when resources are loaded to avoid unnecessary traffic.
- AMP validator is a validator. In order to make sure that web pages are able to reach the required speed, AMP puts strict limits on what can be used in a web page. For example, it does not allow the use of its own JS, or external loading of CSS. validator is designed to help you check that your page meets these requirements.
- Google AMP cache provides a third party cache. This allows AMP pages from Google’s search results to be pre-loaded or even pre-rendered, which never fails to deliver a blazing-fast experience, as in the previous example video. Of course, any third party can provide their own cache.
At the same time, due to these limitations, AMP is currently mainly targeted at pages with static content, such as news sites, blogs, etc., which have less interaction and rely less on JS.
PWA (Progressive Web Apps)
PWA is a series of programs proposed by Google to provide an App-like experience for web pages using cutting-edge web technologies. A PWA application is first a web page. You can write a web application using web technologies, and then add the App Manifest and Service Worker to realize the functions of PWA such as installation and offline. In order for the PWA application to be added to the home screen, the manifest.json is used to define the name, icon, etc. of the application. The configuration is then introduced in the HTML file. The Service Worker is the main solution for offline applications. the Service Worker allows your application to access locally cached resources first, so that it can still provide basic functionality while offline, before it receives any more data over the network. Its life cycle is roughly as follows:
- register Register
- install install
- activated capture resources into cache, activate
- idle idle
- active listens for activate events, traverses the cache, and if there are updates, clears the old cache and updates the resources.
- terminate destroy
Detailed API can be seen on MDN. Detailed examples can be seen on sample given by google on github
TypeScript and BuckleScript
TypeScript - Efficient and Extensible JavaScript
TypeScript is a superset of JavaScript and essentially adds optional static typing and class-based object-oriented programming to the language.
BuckleScript
BuckleScript is a great compiler for compiling OCaml, a language that has been around for almost 30 years, into readable JS into readable JavaScript. It has lightning fast compilation speed and better type safety than TypeScript (which ensures that there are no type errors once the compilation passes).
From HTTP to Socket, an in-depth look at modern front-end packet-catching techniques
Proxy local packet capture can only be applied to the case of dual NICs and the same wifi environment, so try to capture packets in the node.js access layer
Framework tools
- Tree-Shaking removes redundancy, including dead code, and useless modules. webpack2 also introduces the ability to tree-shake
Future-proof Live Streaming Technology - WebRTC
Current live streaming technology
- HLS protocol mobile compatibility is high, but high latency
- Flv.js b station open source video player, the principle is realized through media source Extensions, in the PC compatibility is high, but in mobile compatibility is poor
- WebRTC (Web Real-Time Communication) compatible with mainstream PC browsers, low latency, but mobile compatibility is not good.
XSS Phantom Crisis from Coding onwards
- Service layer ngnix, apache and so on defense module
- Browser layer X-XSS-Protection, CSP
- Code layer encoder, filter
- Bottom line HttpOnly (provides a new attribute for cookies to prevent client-side scripts from accessing them), domain separation
encoder
- filter parameters, escape “, <, >, etc., for html attribute encoding, js encoding
- encodeurl url encoding
filter
Cases where special characters are required, such as rich text editors, etc. Black and white list filtering principles
WebAssembly
JavaScript started out as an interpreted language, and later introduced JIT technology (Just-In-Time compilation), but it was slow to compile due to weak typing and so on. WebAssembly is a bytecode specification for writing high-performance, browser-independent Web components. It achieves performance gains through statically-typed variables and allows any language to compile to the AST tree it sets, making it more suitable for writing modules that take on complex computations such as image processing, 3D computing, speech recognition, and audio/video encoding and decoding.