HTML5, Level 4 CSS, ES6, and more!
The cons of pre-processors, the pros of post-processors
The latest version of JavaScript is here. Ways to start using it right now.
Netflix open source library aims to change the way web applications request and handle data.
Exciting new Level 4 Selectors, Features, and Rules
A taste of basic page construction using Bootstrap, and compiling resources via SASS
Preprocessors became solutions. Examples: SASS, LESS, Coffeesript, jQuery.
Write your code in original languages (JavaScript, CSS)
.row { display: flex; background-color:var(--color-blue); }
.row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color:var(#173fb1); }
FALCOR allows you to code like all the data is there on the device
10 years ago the web was there to GET things.
Now, the web is there to DO things
WEb apps do large amounts of stuff with small resources.
Netflix becamse a REST-less API
Ex: if 2 URLs are used for the same data (ex: different querystring params), data could become stale
FALCOR is an open source library from Netflix that lets you represent all your remote data sources as a single domain model via a virtual JSON graph. You code the same way no matter where the data is.
We do not want a TREE - duplicate instances (leaves) of same entity.
Example - genre lists (Recently Added, Watching) - a title (movie) can be duplicated into other genres, we want a single reference (change rating, all titles in all genres reflect, no staleness)
Having too many libraries plugged into your web application can lead to a frustrating juggling act. Having too many libraries plugged into your web application can lead to a frustrating juggling act.
* universal JS is better - client & server * is a unified process * serve * transpile * test * templates * step 0 - use modules * IIFE is not a module. What is IIFE? * * An immediately-invoked function https://en.wikipedia.org/wiki/Immediately-invoked_function_expression * * useful for establishing private methods * ES6 and common JS modules are modules * * commonJS https://en.wikipedia.org/wiki/CommonJS - default module system; different syntax for browser & node :( * "The code you write today is what will be Copy + Pasted tomorrow!" * Start writing ES6 now * Use Babel now (transpile) Classes * UI components as classes (frameworks) * let go of object.extend * mixins of 2 classes (by React) can overwrite duplicate methods (lose 1st method definition) * Goal: UI composed only of components * links * buttons * inputs * etc, all are components * Build Process * foundation * Rule of Thumb - if you require > 1 plugin, make a new module Testing * as you code * before you push * on your CI server * make it easy, fast, automated, easy to bootstrap, create a pro-testing culture Eslint - JavaScript linting utility. Why? * style checker * pluggable, future friendly * config rules Ideals * RESTful APIs - http://www.restapitutorial.com/ http://www.restapitutorial.com/lessons/whatisrest.html * Write JS * "Universal" JS is very difficult. https://medium.com/@mjackson/universal-javascript-4761051b7ae9#.eyk8iw1y1 Isomorphic JavaScript * the future of app dev. * These apps can run both client-side and server-side. Backend & Frontend share the same code. Webpack + Browserify Node code vs Browser Code bundled not bundled Steps 1. Start small when transitioning 2. Iterate on modules. Learn & refactor - aren't build all at once one time 3. Keep your code clean 4. Automate
Same concept as Legos
Example: Netflix episode blocks. See their HTML. The Episode lookup module.
Bad Examples: Virgin America, Santander - comment elements treated differently, multiple sets of CSS
Atoms > Molecules > organisms > templates > pages
Examples
#sandwich { bread: white; meat: chicken; salad: lettuce, onion, tomato; sauce: mayonnaise; }
<div id="sandwich">... </div>
.headline-1 { font-size: $fontsize-up-five; } .headline-2 { font-size: $fontsize-up-four; }
Grays @gray-000 @gray-100 ... @gray-800 Primarys @primary-000 ... @primary-800 Secondary, Tertiary, etc.
.hav-screen-small { .... @media(min-width: $screen-medium){ ... } }
There is NO CSS4, there are just new modules "level 4...".
:in-range :out-of-range These apply only to elements with range limits & inside a form control
:optional :required
:read-only :read-write
:placeholder-shown
:matches()
:not() now in CSS4 can take a list of selectors as argument
section:has(h1, p){ ... } //rule affects the h1 & p inside the <section> tag
/*style the LI element... */ ul > $li > p { ... } //not yet supported :(Case Sensitivity
a[href$="pdf" i] //where i stands for case-insensitive //not supported by browsers right nowDirectionality
//not supported by browsers right nowHyperlink
:any-link :local-link //not supported by browsers right now
JavaScript = ECMAScript = ECMA-262.
JS has been lacking in processing leadership (whatever that means)
browsers / \ standards - transpilers
npm install babel
npm - is a way to run commands easily
npm "scripts" build, watch, test, server
Karma test runner opens browsers for you
$(npm bin)/babel src -d lib
$(npm bin)/babel input.js -o output.js
install Babelify plugin
"blacklist":["regenerator"] keep certain transformations out "optional":["runtime"]