Skip to content

Latest commit

 

History

History
442 lines (301 loc) · 9.56 KB

react.md

File metadata and controls

442 lines (301 loc) · 9.56 KB
Raw

title: Web Components (w/ React) - Past, Present, Future

Agenda

  • Intro
    • <HelloWorld/>
    • Components in Components in Components
    • It's "Just" JavaScript - For Each Loops in Your Component Templates
    • "Generic" Placeholder / Containers - Add Any Components / Children
  • Inside React Web Components
  • Classes, Classes, Classes
    • Extends React.Component
    • State & Lifecycle - Seconds Elapsed: 47
  • High Speed Batched Updates - 60 Frames/Second (60 FPS)
    • Diffing Trees
  • React @ Facebook - "Enterprise" React
    • GraphQL, Relay, Flow 'n' Friends
  • What's Next?
    • I) Built-In Web Components Browser APIs
    • II) JavaScript w/ Types
    • III) More Fun - Fun(ctional) Languages
    • IV) Going Mobile - React Native for Android, iOS Apps
  • Community - Meetups & Conferences

What's React.js?

React ★62400 is a (small) JavaScript library for building user interfaces. Declarative. Efficient. Flexible.

<HelloWorld/> - First Web Component w/ React

Let's make a <HelloWorld/> web component / element / tag.

The simplest web component w/ React - a function returning a web snippet (HTML block)

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

or in "fun(k)y" JavaScript 6+ arrow-style:

const HelloWorld = ()=> <h1>Hello, World!</h1>;

That's it.

Components in Components in Components

Nesting of Web Components => Web Component Trees

Example:

function Message( {name} ) {
  return <span>{ `Hello, ${name}!` }</span>;
}

function HelloWorld() {
  return <h1><Message name="World"/></h1>;
}

and (again) use it like:

<HelloWorld/>

It's "Just" JavaScript - For Each Loops in Your Component Templates

In Pseudo Code:

for link in links
  <li><a href={link.url}>{link.title}</a></li> 
end

No New Template Language. Use JavaScript 6+:

links.map( 
  link => <li><a href={link.url}>{link.title}</a></li> 
)

Example:

function LinkList( {links} ) {
  return( 
      <ul>
        {links.map( link => <li><a href={link.url}>{link.title}</a></li> )}
      </ul>);   
}

and use it like

const links =
[
 { title: "football.db - Open Football Data",              url: "https://github.com/openfootball" },
 { title: "beer.db - Open Beer, Brewery 'n' Brewpub Data", url: "https://github.com/openbeer"     },
 { title: "world.db - Open World Data",                    url: "https://github.com/openmundi"    }
];
...

<LinkList links={links}/>

"Generic" Placeholder / Containers - Add Any Components / Children

function Page( {children} ) {
  return( 
     <div>
        <Header/>
        <div>
          {children}
        </div>
        <Footer/>
      </div>);
}

and use it like:

<Page>
  <div>
    <b>News 'n' Updates</b>
    <PostList posts={posts}/>
  </div>
  <div>
    <b>Links 'n' Bookmarks</b>
    <LinkList links={links}/>
  </div>  
</Page>

Inside React Web Components

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

gets converted to "plain vanilla" JavaScript:

function HelloWorld() {
  return React.createElement( "h1", null, "Hello, World!" );
}

Try Babel online => babeljs.io/repl

Inside React Web Components (Continued)

function Message( {name} ) {
  return <span>{ `Hello, ${name}!` }</span>;
}

function HelloWorld() {
  return <h1><Message name="World"/></h1>;
}

gets converted to "plain vanilla" JavaScript:

function Message(_ref) {
  var name = _ref.name;
  return React.createElement( "span", null, "Hello, " + name + "!" );
}

function HelloWorld() {
  return React.createElement("h1", null,
           React.createElement(Message, { name: "World" })
  );
}

Inside React Web Components (Continued)

function LinkList( {links} ) {
  return (
      <ul>
        {links.map( link => <li><a href={link.url}>{link.title}</a></li> )}
      </ul>);   
}

gets converted to "plain vanilla" JavaScript:

function LinkList(_ref) {
  var links = _ref.links;

  return React.createElement( "ul", null,
    links.map( function(link) {
      return React.createElement( "li", null,
               React.createElement( "a", { href: link.url }, link.title ));
    }));
}

Classes, Classes, Classes - Extends React.Component

Use Classes for more "advanced" components. Example:

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

is the same as:

class HelloWorld extends React.Componet {

  render() {
    return <h1>Hello, World!</h1>;
  }
}

Classes, Classes, Classes (Continued) - Seconds Elapsed: 47

  • Lifecyle e.g. mount - component turned on - and unmount - component turned off
  • State e.g. secondsElapsed - a variable holding a number / counter, for example
class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {secondsElapsed: 0};
  }

  tick() {
    this.setState((prevState) => ({
      secondsElapsed: prevState.secondsElapsed + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
}

High Speed Batched Updates - 60 Frames/Second (60 FPS)

React keeps a copy of the DOM (Document Object Model) in memory like a "frame buffer"; uses a diffing algorithm to calculate changes (in the two trees) and batches updates together in 60 frames per second.

React @ Facebook - "Enterprise" React

  • GraphQL & Relay - Data Queries & Binding
  • Flow - Built-Time (Static) Data Flow Analysis & Type Checking
  • ReasonML - "Better" Objective Functional Language (Compiles to JavaScript)

and more.

I) What's Next? Built-In Web Components Browser APIs

New (Upcoming) Web Standard Building Blocks

Custom Elements

(<element>) - W3C Spec

Shadow DOM

(hide DOM subtrees under shadow roots - createShadowRoot()) - W3C Spec

HTML Templates

(<template>) - W3C Spec

HTML Imports

(include and reuse HTML documents) - W3C Spec

II) What's Next? JavaScript w/ Types

Biggies

  • TypeScript ★20098 (by Microsoft) - JavaScript Extended w/ Types
  • Flow ★10693 (by Facebook) - Add Annotations for Type Checking
  • Dart ★1038 (by Google) - New Language w/ (Optional) Types

And Others.

III) What's Next? More Fun - Fun(ctional) Languages

Biggies

  • Elm ★3706 (by Evan Czaplicki 'n' friends) - Small (Pure) Functional Language for the Web
    • Based on Haskell (Simplified)
  • ReasonML ★2467 (by Facebook) - Larger (Pragmatic) Functional Language
    • Based on OCaml (New ReasonML Syntax Closer to JavaScript)

And Others.

Why Fun(ctional)?

  • "Stronger" Types
    • No Null and No Undefined Possible
      • e.g. Elm Uses Maybe types with Just a and Nothing and Tuple Units e.g. ())
    • Lists must always be of the same type
    • If expressions must always return the same type (in if and else branch)
    • Case expressions must always cover all possible branches / values
    • And so on
  • Immutability
    • Cannot change/overwrite variables (change will always create a new variable)
    • Great for "high-speed" diffing web component/element trees ("just" compare node references)
    • Great for "time travel" debugging e.g. save or restore any state in time

IV) What's Next? Going Mobile - React Native for Android, iOS Apps

Use React Native ★45909 (and JavaScript) to build "real" phone apps for Android an iOS. Example:

import React, { Component } from 'react';
import { Image, ScrollView, Text } from 'react-native';

class AwkwardScrollingImageWithText extends Component {
  render() {
    return (
      <ScrollView>
        <Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} />
        <Text>
          On iOS, a React Native ScrollView uses a native UIScrollView.
          On Android, it uses a native ScrollView.

          On iOS, a React Native Image uses a native UIImageView.
          On Android, it uses a native ImageView.

          React Native wraps the fundamental native components, giving you
          the performance of a native app, plus the clean design of React.
        </Text>
      </ScrollView>
    );
  }
}

Community - Meetups & Conferences

Meetups In Vienna, Austria

Conferences

  • React Conf (by Facebook)
    • 2017 - March 13 & 14 - in Santa Clara, CA
    • 2016 - February 22 & 23 - in San Francisco, CA
    • 2015 - January 28 & 29 - Facebook HQ, CA

In Europe

  • React Europe
    • 2017 - May 18 & 19 in Paris, France
    • 2016 - June 2 & 3 in Paris, France
    • 2015 - July 2 & 3 in Paris, France

Regional in 2017

More Upcoming Conferences »