The P5 mobile app

The outline

1. App architecture
2. JavaScript
3. CSS

1. App architecture

iOS, Android, Windows Phone, ...

HTML

JavaScript

CSS

2. JavaScript

• Vanilla JS
• AngularJS (has a tiny jQuery lite inside)
• Gulp as a JavaScript task runner

2. JavaScript

What is gulp for?

1. Compiles SCSS files to CSS.
2. Creates a CSS sprite from several icons.
3. Compiles ES 6 JS files to ES 5.
4. All this happens after every file save.

2. JavaScript

What is ES6?

Template strings

var name = "Franta Skočdopole";
var email = "franta@skocdopole.cz";
var message = `Hello, ${name}, we have sent something to ${email}.`;

var multiline = `This
is
a multiline text`;

var name = "Franta Skočdopole";
var email = "franta@skocdopole.cz";
var message = "Hello, " + name + ", we have sent something to " + email + ".";

var long = "This\nis\na multiline text";

2. JavaScript

What is ES6?

Arrow functions #1

var nums = [1, 2, 3, 4, 5];

nums.map(x => x * x);
// yields [1, 4, 9, 16, 25]

var nums = [1, 2, 3, 4, 5];

nums.map(function(x) {
  return x * x;
};
// yields [1, 4, 9, 16, 25]

var moreParams = (one, two) => one + two;

var moreParams = function(one, two) {
  return one + two;
};

var multiple = (one, two) => {
  doSomething();

  return one + two;
};

var multiple = function(one, two) {
  doSomething();

  return one + two;
};

2. JavaScript

What is ES6?

Arrow functions #2

function Test(element) {
  this.something = "Test";

  element.addEventListener("click", e => alert(this.something));
}

function Test(element) {
  var self = this;

  this.something = "Test";

  element.addEventListener("click", function(e) {
    return alert(self.something);
  });
}

2. JavaScript

What is ES6?

Destructuring #1

var user = {
  firstName: "Franta",
  lastName: "Skočdopole"
};

var { firstName, lastName } = user;

var user = {
  firstName: "Franta",
  lastName: "Skočdopole"
};

var firstName = user.firstName;
var lastName = user.lastName;

var a = "good";
var b = "bad";

[a, b] = [b, a];

var a = "good";
var b = "bad";
var tmp = "good";

b = a;
a = tmp;

2. JavaScript

What is ES6?

Destructuring #2

function def(name = "Default name") {
  console.log(name);
}

def(); // Logs "Default name"
def("Jonas"); // Logs "Jonas"

function def(name) {
  if(name === undefined) {
    name = "Default name";
  }

  console.log(name);
}

def(); // Logs "Default name"
def("Jonas"); // Logs "Jonas"

function printPoints({ x, y }) {
  console.log(x, y);
}

printPoints({ x: 2, y: 3 });

function printPoints(obj) {
  var x = obj.x;
  var y = obj.y;

  console.log(x, y);
}

printPoints({ x: 2, y: 3 });

2. JavaScript

What is ES6?

Rest and spread operators

var nums = [1, 2, 3, 4, 5];

Math.max(...nums);

var nums = [1, 2, 3, 4, 5];

Math.max.apply(Math, nums);

function run(...fns) {
  fns.forEach(fn => fn());
}

run(function() {}, function() {});

function run() {
  for (var i = 0; i < arguments.length; i++) {
    arguments[i]();
  }
}

run(function() {}, function() {});

2. JavaScript

What is ES6?

Rest and spread operators

var nums = [1, 2, 3, 4, 5];

Math.max(...nums);

var nums = [1, 2, 3, 4, 5];

Math.max.apply(Math, nums);

function run(...fns) {
  fns.forEach(fn => fn());
}

run(function() {}, function() {});

function run() {
  for (var i = 0; i < arguments.length; i++) {
    arguments[i]();
  }
}

run(function() {}, function() {});

2. JavaScript

What is ES6?

Classes

class Car extends Vehicle {
  constructor(engine) {
    super(vehicle);
  }

  update(wheels) {
    // ...
  }
  static alertMe() {
    alert("Hey");
  }
}

2. JavaScript

What is ES6?

Maps and Sets

var set = new Set();
set.add(1);
set.size; // 1
set.add(2);
set.add(2);
set.size; // 2
set.delete(2);
set.size; // 1

var unique = new Set([1, 2, 3, 3, 4, 4]);
unique.size; // 4

var map = new Map();
map.set("name", "Jonas");

map.has("name"); // true
map.get("name"); // "Jonas"
map.size;        // 1

map.delete("name");
map.has("name");    // false
map.get("name");    // undefined
map.size;           // 0

var obj = {};

map.set(obj, true);
map.has(obj);  // true

3. CSS

Basics

• The CSS is written using SASS (the SCSS syntax).
• We use variables + nesting (2 levels max) only.
• No freaking mixins for prefixes, we use autoprefixer.
• BEM methodology which introduces a naming convention.
• This prevents name clashing and reduces specificity issues.
• We use flexbox for layout since its supported in all mobile browsers.

3. CSS

Autoprefix everything!

• Part of gulp build pipeline.
• You write only standard syntax.

a {
  background: -webkit-linear-gradient(bottom, black, white);
  background: linear-gradient(to top, black, white);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex
}
:-ms-input-placeholder {
  color: #ccc;
}
::-moz-placeholder {
  color: #ccc;
}
::-webkit-input-placeholder {
  color: #ccc;
}
::placeholder {
  color: #ccc;
}

3. CSS

Autoprefix everything!

.selector {
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.selector {
  border-radius: 5px;
}

3. CSS

Autoprefix everything!

3. CSS

BEM methodology

• Consists of these parts:
  • Components
  • Descendants
  • Modifiers
  • Utilities

3. CSS

BEM methodology

Components

• Pascal case for names (deal with it).
• Reusable UI patterns.
• Abstract name preferable.

3. CSS

BEM methodology

Descendants

• Camel case for names (deal with it).
• Should be descendants of a component.
• Specific parts of a component.

3. CSS

BEM methodology

Modifiers

• Camel case for names (deal with it).
• Can be on components and descendants.
• They require the base class.

3. CSS

BEM methodology

Utilities

• Simple unusual style.