Looking back on 2015: six exciting web technologies

By -

In 2015, there was an amazing amount of innovation related to the web platform. The following sections describe six technologies that I find exciting:



  • Electron

  • React Native

  • Progressive web apps

  • Visual studio code

  • Rollup

  • Web Assembly



This blog post is a loose follow-up to “Web platform: five technologies to look forward to in 2014”, which I wrote in early 2014.


Electron

Electron (by GitHub) lets you build cross-platform desktop apps with web technologies. Its features include:



  • Automatic updates

  • Crash reporting

  • Windows installers

  • Debugging and profiling

  • Native menus and notifications


Electron was initially created for GitHub’s editor Atom and is now used by various companies, including Microsoft (Visual Studio Code, see below), Slack and Docker.


Architecturally, Electron contains both a Node.js runtime and a minimal embedded Chromium browser. Electron apps run in several processes: A main process runs the main script specified by the app’s package.json file. To display a user interface, that script can open windows. Each of those windows runs in a separate process (a so-called renderer process), just like a tab in a web browser.


React Native

With React Native, you can build native apps for iOS and Android via React. The virtual DOM is still there and you still use JSX to create it, but the actual UI is built with native components such as UITabBar on iOS and Drawer on Android. You lay out those native components via Flexbox.


On one hand that means that each of the following platforms has a slightly different UI layer now: the web, iOS, Android. On the other hand, you’ll be able to reuse much of your code, while having a native experience on each platform.


Usually I’m skeptical of solutions that try to transplant a language that is native on one platform to another one. But a few months ago, an iOS developer evaluated React Native and stated:



I may never write an iOS app in Objective-C or Swift again.



This is remarkable if you consider that he had to learn both JavaScript and React before he could be productive with React Native.


Another interesting quote, by Andy Matuschak (who “helped build iOS 4.1–8 on the UIKit team”):



I say with confidence as a former UIKit author: React's model for the UI layer is vastly better than UIKit's. React Native is a *huge* deal.



Progressive web apps

There are areas, where native apps have caught up with the web (deep linking, indexing). Progressive web apps are not really a technology, but rather an umbrella term for characteristics of modern web apps. These mean that web apps are catching up with native apps in some areas and moving ahead of them in others:



  • Progressive enhancement: The app runs in as many environments as possible. If it needs a service, it should use whatever is available and degrade gracefully if nothing is there.



  • Responsive user interface: The app adapts to various input methods (touch, speech, etc.) and output methods (different screen sizes, vibration, audio, braille displays, etc.).



  • Connectivity-independence: The app works well offline and with intermittent or low-bandwith connectivity.



  • App-like UI: The app adopts UI elements of native platforms, including a fast-loading user interface (which can be achieved by caching important assets via service workers).



  • Continuous updates (“freshness”): The service worker API defines a process for automatically updating apps to new versions.



  • Secure communication: The app is served and communicates via HTTPS, to prevent snooping and attacks.



  • App discovery: Meta-data such as W3C web app manfests enables search engines to find web apps.



  • Push interaction (“re-engagement”): Features such as push notifications actively keep users up-to-date.



  • Natively installable: On some platforms, you can install a web app so that it feels like a native app (icon on home screen, separate entry in app switcher, browser chrome optional). All without going through a native app store.



  • Linkability: Easily share apps via URLs and run them without installation.




I’m mentioning progressive web apps here, because I like all of the aforementioned techniques and technologies. But I’m not sure how much “progressive web apps” are different from simply “modern web apps”. One idea I oppose is giving web apps install banners (their killer feature is, after all, that they don’t need those).


Further reading:



Visual Studio Code

Visual Studio Code is a JavaScript code editor for whom the goal is to exist in the space between full IDEs and text editors. And, in my opinion, it succeeds nicely. A plus is that it’s written in JavaScript and based on Electron. In 2015, VSC became open source and gained extensions (an API for extending it via plugins).


Rollup

Rollup is a module bundler: it converts multiple ES6 modules into a single bundle, a module in either one of serveral formats (ES6, CommonJS, …). Rollup brings two innovations to the world of JavaScript modules:



  • The bundle it outputs only includes those exports that are actually used, via a technique called “tree-shaking”. Three-shaking crucially depends on the static structure of ES6 modules. “Static structure” means that they are analyzable at compile time, without executing any of their code. Having this kind of dead code elimination is great, because we are now free to make modules as big or as tiny as makes sense, without having to worry about the sizes of bundles.



  • It demonstrates that ES6 modules are a viable bundle format for ES6 modules (obviating the need for any kind of custom loading).




Further reading:



Web Assembly

Web Assembly is a binary format for a static formal language (derived from asm.js) that can be fed into JavaScript engines (that support it) to create fast executables. The formal language is higher-level than bytecode and therefore easier to evolve. The output lives inside the universe of JavaScript and therefore integrates well with it. Given how fast asm.js is, C++ compiled to Web Assembly will run roughly 70% as fast as when you compile it to native code.


Web Assembly will probably eventually get support for JavaScript OOP. At that point, it will truly be a universal virtual machine for the web.


Further reading:




Comments

Post a Comment

Popular posts from this blog

Steve Lopez and the Importance of Newspapers

By -
Image
It has been one year since I cancelled my subscriptions to The New York Times and the Los Angeles Times . In that time, I continued to read both publications online. My assessment of this experiment is that reading newspapers and journalism online is vastly inferior to the hard copy thrown on my porch each morning. So I restarted my subscription to the Los Angeles Times and I have made it a point to buy The New York Times as often as I pass one of those coin boxes or my local news stand. The catalyst for this re-evaluation resulted from catching the film, The Soloist on cable last week. I liked the movie, although the scenes I found most interesting were the ones that showed columnist Steve Lopez at work. I realized the book was sitting in my “to-read” stack, so I pulled it and began reading. The book, as I expected, is better than the film. Lopez clearly addresses the revolution occurring in journalism, and worries about his future with the paper even as he researches and writes...
Keep reading

Ideas for fixing unconnected computing

By -
I traveled quite a bit recently and got exposed to a negative aspect of current technology: Things work well if you have a solid internet connection with no traffic limits and are plugged into a power outlet. Otherwise, things do not work well at all. This blog post describes the problems that arise and suggests solutions. Managing data traffic Cell phones are quite good at conserving traffic, laptops much less so. This becomes a problem when your laptop has a mobile connection (e.g., via tethering or in a hotel with data caps). I once accidentally started iTunes in such a situation and immediately used up my daily allowance of traffic. Similarly, mobile email is frugal with traffic (only the current folder is updated, attachments are only downloaded on demand, etc.), desktop email is usually not. How can this be handled better? I’d like to see three traffic modes for all operating systems: “full”, “restricted”, “minimal”: In full traffic mode , all data transfers are allowed and happe...
Keep reading

Omar to kill me

By -
Image
  The sentence “ Omar m’a tuer ” is unintelligible French, as if it had been written by an illiterate person. At first sight, Mme Ghislaine Marchal —the author of those words in blood—seems to be saying that she had been killed by Omar in her villa at Mougins (Alpes-Maritimes). But why would that dying French lady have used such poor grammar? On that flimsy evidence, in 1991, the Moroccan gardener Omar Raddad was condemned and jailed. But he persisted non-stop upon his innocence. In 1998, he was liberated, and now lives in Morocco. A recent analysis of DNA specimens from the scene of the crime provides new facts. Four males, none of whom was Omar Raddad, have left traces of their presence. Will the real murderer be identified at last?
Keep reading