Building your first PWA: Foundations

person carlosrojasofolder_opencrashcourselocal_offer, , access_time July 27, 2017

Hello, Startupers!!!

This is Lesson 2 in this trip to build your first PWA App with Ionic.

I hope you are very comfy today because this going to be a bunch of new topics that you gonna need in order to understand Ionic mainly, but don’t worry you going to find this helpful later when you continue creating amazing views and logic in your App.

ECMAScript 6

Javascript is the cornerstone in the world of PWA and WEB Apps. Angular 2 is built on top of ECMAScript 6. ECMAScript 6 is the specification of Javascript to be used in all the WEB in the next years. EC6 bring interesting stuff.

New Features

Classes

Javascript ES 5 don’t have the concept of Classes that is a paradigm used in development in other languages as C#, Java, Objetive-C. But now we gonna can use this feature in Javascript easily.

ES6 (Now)
class Person {
  name;
  age;

  constructor (name, age) {
    this.name = name;
    this.age = age;
  }

  getName(){
    return this.name;
  }
}
ES5 (Before)
var Person = function (name, age) {
    this.name = name;
    this.age = age;
};

Person.prototype.getName = function () {
    return this.name;
};

Modules

Now we can write and import smoothly our libraries.

ES6 (Now)
//  lib/math.js
export function multiply (x, y) { return x * y }

//  someApp.js
import { multiply } from "./lib/math"
console.log(multiply(2, 2));
ES5 (Before)
//  lib/math.js
LibMath = {};
LibMath.multiply = function (x, y) { return x * y };

//  someApp.js
var math = LibMath;
console.log(math.multiply(2, 2));

Promises

Promises are a nice way to make async requests on other words ask to servers for data. Now is integrated in javascript then you can implement this easily.

ES6 (Now)
doSomething(){
   return new Promise((resolve) =>{
     resolve(true);
   })
}

doSomething().then(rta => {
  console.log(rta);
});
ES5 (Before)
function doSomething (onDone) {
  onDone();
}

doSomething(function(rta){
  console.log(rta);
})

let y const

Now we can integrate the variable scope without use self-invoking functions.

ES6 (Now)
const PI = 3.14;
if(true) {
  let twitter = "@startupersio";
}
console.log(twitter); //Error. twitter is out of the scope.
console.log(PI); //3.14

PI = 3.12; //Error. PI is Constant.
ES5 (Before)
if(true) {
  var twitter = "@startupersio";
}
console.log(twitter); //twitter is global

The important thing to understand here is that we can use this new features with Ionic.

Transpiling

Transpiling means converting from one language to another language. This is important because ES6 is not completely supported by browsers yet. That means that we can use this new cool stuff. Then we need convert code from ES6 to ES5 to use new features but in a language that all the browsers understand already.

When you are using Ionic 2 you don’t need worry with this. Ionic CLI handle this for you.

Angular

Ionic Apps are build with Angular.

The important thing here is that you need remember that you gonna use Angular all the time with you new Ionic App.

You can read the next links 🙂

Angular Intro

See you in the next lesson and Keep coding…

@carlosrojas_o

Liked it? Take a second to support carlosrojaso on Patreon!