Ionic 4 — From JavaScript to ES6 and TypeScript
This tweet from Rod Johnson says it all about the present and the future of the JavaScript. We believe or not the JavaScript language has changed for good in the last time:
We try to describe here the evolution of the Ionic framework in relation the JavaScript language growth.
As we already know, Ionic is using the Angular framework for building the Web applications that will run in the WebView (also it uses Cordova framework for making native calls). Ionic 1 was based on Angular 1 (named AngularJS). Ionic version 2+ is based on Angular versions 2+ (named Angular). Initially, AngularJS (Angular 1) was based on JavaScript standard ES5. But starting with the version 2, Angular is based on TypeScript which is a superset of the ES6.
As we can see from the previews diagram, ES6 is adding an object-oriented nature to the JavaScript language which is a functional language by construction. It introduces the notions of class (with constructors, methods, properties, inheritance, etc.) and let us create modules (packages of classes). It seems that in our days the coexistence of functional-oriented and object-oriented natures in a language is the winning solution.
Aditional to the ES6, Typescript is coming with data types and annotations. From the list of primitives types introduced by Typescript, we can enumerate Boolean, Number, String, Array, Tuple, Enum, Any, Void.
Initially, a new language was created for Angular named AtScript. But when annotations were introduced in TypeScript by Microsoft, the TypeScript become the primary language for the Angular which is a product sponsored by Google. Now we can say that Angular is a collaboration (directly or indirectly) between Google and Microsoft and both communities are interested in its growth.
JavaScript
JavaScript is the language used by de developers to provide dynamism to the Web applications that are running in the browser (HTML is for creating the content, and CSS is just for styling the pages). In general, there is a compatibility between the JavaScript implementations in the modern browsers (Google Chrome, Firefox, Apple Safari, Microsoft Edge), mainly because all are implementing a specification named ECMAScript which is responsible for regimenting the language syntax an the way this syntax is interpreted by the browsers. Throughout the JavaScript developers community, it was a known exception: Microsoft Internet Explorer which it was always out of the standards in the past — this problem is fixed by Edge that it is released starting with Windows 10.
JavaScript is a language build on the ‘single threaded’ model — because it was created for the GUI purposes where the user interaction with the app interface is generating a big number of events that have to be processed rapidly, one after one. This approach is contrary to the ‘multithreading’ concurrency, specific to the server applications. But this concurrency model is eliminating many possible concurrency problems like ‘race conditions’. And because it is based on an ‘event loop’ that is consuming events, it is straightforward to create new custom events — this is an explanation for the asynchronous nature of the language.
In the last time, there is a tendency of using JavaScript not just on the client side but also on the server side using technologies like Node JS. That’s why the JavaScript community exploded in the last years. Also, JSON — which is, in fact, the data model from the JavaScript language is a preferred choice in client-server communication (a replacement for XML) — mainly when the client and the server are ‘speaking’ the same Javascript language.
ECMAScript — From old ES5 to the new ES6, ES7, ES8
As we said before the JavaScript language is specified by a standard named ECMAScript (European Computer Manufacturers Association). The language used by all of our day’s browsers, also named regular JavaScript, is the version ES5 of this standard. Angular is based on TypeScript which has many elements from the version ES6 of the standard (also named ES2015) which is coming with a set of new concepts, not existing in ES5:
• Classes — ES6 classes provide a way to encapsulate and extend the code.
• Modules — Provides a modular way of organizing and loading code.
• Arrow functions — A short-hand version of an anonymous function.
• Block-levelscope–ES6 now supports scoping variables to blocks (if, for, while, etc.) using the ‘let’ keyword.
• Constants — We can now define constants in ES6 code using the ‘const’ keyword.
• Promises — Used with async operations.
• Template Strings — Clean way to build up string values.
In the modern browsers, the support for JavaScript ES5 is excellent. JavaScript ES6 is also well supported in the current browsers. There is also an ES7 spec and an ES8. For a complete introduction to all these new standards that are ready, we have to rediscover the JavaScript, and a read of the new Venkat Subramaniam book is recommended.
TypeScript
The Angular framework starting with version 2 is coming with the TypeScript language which is adding data types to the classes and the new constructs taken from ES6. TypeScript is very similar to an object-oriented compiled language like Java — now when the source is edited (before execution), type checks and static checks, in general, can be done. These checks are a significant advantage because the number of possible runtime errors can decrease. There is also excellent support in IDEs for the Typescript language.
Because TypeScript is not understood by the browsers, there is a process of transpiling. This transpiling process is not a real compilation to an intermediate bytecode like in Java language, but a transformation of sources from TypeScript to ES5, which is understood by all the browsers. This transformation it is done automatically by Ionic in a dynamic way using the transpiler that is coming with the TypeScript language (there are also transpilers for the conversion from ES6 to ES5: Traceur by Google and Babel created by the JavaScript community.
For other related content please read our Ionic 4 book.
