gladiatorAsh

www.w3schools.com

1. Directives are HTML attribute modifiers
2. Expressions bind data to HTML
3. Filters format data and coincidentally also filter
4. Modules define Angular JS applications
5. Controllers control AngularJS applications

• ng-app directive: Initiates an angular js application
• ng-model directive: binds value of HTML controls to app data

gladiatorAsh

React.js

React

• Element is a simple key,ref,props enclosure
• Gets generated on every react batch strategy pass
• It is "owned” by ReactCompositeComponent
• JSX translates tags into ReactElement.createElement ftion calls

ReactCompositeComponent

• React component (class)

gladiatorAsh

React Reusable Component Factory

'use strict';

const ENTER_KEY = 13;

const emailFactory = function ({
  React,
  setEmail,

gladiatorAsh

What is React Fiber? And how can I try it out today?

what?

React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of research by the React team.

• Andrew Clark: What's Next for React — ReactNext 2016
• React Fiber Architecture

why?

gladiatorAsh

What is React Fiber? And how can I try it out today?

what?

React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of research by the React team.

• Andrew Clark: What's Next for React — ReactNext 2016
• React Fiber Architecture

why?

gladiatorAsh

[12:03 AM] acemarke: "controlled" and "uncontrolled" inputs
[12:04 AM] acemarke: if I have a plain, normal HTML page, and I put <input id="myTextbox" type="text" /> in my page(edited)
[12:04 AM] acemarke: and I start typing into that textbox
[12:04 AM] acemarke: it remembers what I've typed. The browser stores the current value for that input
[12:05 AM] acemarke: and then sometime later, I can get the actual element, say, const input = document.getElementById("myTextbox"), and I can ask it for its value: const currentText = input.value;
[12:05 AM] acemarke: good so far?
[12:08 AM] acemarke: I'll keep going, and let me know if you have questions
[12:08 AM] lozio: ok, actually I'm reading
[12:09 AM] lozio: good
[12:09 AM] acemarke: so, a normal HTML input field effectively stores its own value at all times, and you can get the element and ask for its value

gladiatorAsh

React lifecycle cheatsheet

Method	Side effects1	State updates2	Example uses
Mounting
componentWillMount		✓	Constructor equivalent for createClass
render			Create and return element(s)
componentDidMount	✓	✓	DOM manipulations, network requests, etc.
Updating
componentWillReceiveProps		✓	Update state based on changed props

gladiatorAsh

Currently considering https://github.com/webdriverio/webdrivercss

---

Core Goals:

• Can test in up-to-date versions of all major browsers
• Can test on up-to-date versions of all major OSes
• Can test in IE9 (because Bootstrap v4 will support IE9+)
• Don't want to have to setup/maintain our own cluster of VMs running all the necessary OSes (and all the versions of Windows)
• Workflow for management of reference/baseline/norm screenshots

gladiatorAsh

var str = 'class ಠ_ಠ extends Array {constructor(j = "a", ...c) {const q = (({u: e}) => {return { [`s${c}`]: Symbol(j) };})({});super(j, q, ...c);}}' + 
          'new Promise((f) => {const a = function* (){return "\u{20BB7}".match(/./u)[0].length === 2 || true;};for (let vre of a()) {' +
          'const [uw, as, he, re] = [new Set(), new WeakSet(), new Map(), new WeakMap()];break;}f(new Proxy({}, {get: (han, h) => h in han ? han[h] ' + 
          ': "42".repeat(0o10)}));}).then(bi => new ಠ_ಠ(bi.rd));';

try {
  eval(str);
} catch(e) {
  alert('Your browser does not support ES6!')
}

gladiatorAsh

Latency Comparison Numbers (~2012)
----------------------------------
L1 cache reference                           0.5 ns
Branch mispredict                            5   ns
L2 cache reference                           7   ns                      14x L1 cache
Mutex lock/unlock                           25   ns
Main memory reference                      100   ns                      20x L2 cache, 200x L1 cache
Compress 1K bytes with Zippy             3,000   ns        3 us
Send 1K bytes over 1 Gbps network       10,000   ns       10 us
Read 4K randomly from SSD*             150,000   ns      150 us          ~1GB/sec SSD