zerrtech / zerrtech-boise-frontend-devs-2018

zerrtech-boise-frontend-devs-2018

Technology Trends

JavaScript is at the top of several lists of the most popular technologies. No surprise there. Owns the front end, big presence on the backend, too.

Stack Overflow 2018 Developer Survey, for programming languages, JS on top for the 6th straight year

Source: Stack Overflow 2018 Developer Survey - Languages

Octoverse says roughly the same thing

Source: Octoverse - Top Languages

Frameworks, Libraries, and Tools, Angular topping React

Source: Stack Overflow 2018 Developer Survey - Frameworks

State of JS approaches their survey in a little different way, React has a big edge on the "Used it, would use again"

Source: State of JS 2018 - Front-end Frameworks

State of JS 2018 Individual framework pages:

• React
• Vue.js
• Angular

Most Loved Frameworks - React love

Most Dreaded Frameworks - Angular creeping up towards the top

Source: Stack Overflow 2018 Developer Survey - Most Loved, Dreaded Frameworks

VS Code somehow the most popular editor now

Source: Stack Overflow 2018 Developer Survey - Most Popular Dev Environments

Framework Updates and New Features

React

• React v16

  • v16.0

    • Return array of elements and strings from render method
    • Fragments

    return (
      <>
        <Child0 />
        <Child1 />
        <Child2 />
      </>
    )
    // Or
    
    return (
      <React.Fragment>
        <Child0 />
        <Child1 />
        <Child2 />
      </React.Fragment>
    )

  • v16.3

    • Context API
      • Pass data to deeply nested components without passing props all the way down
      • Use cases:
        • Authenticated users
        • Themes
        • Preferred language

  • v16.4

    • Pointer events
      • onPointerDown
      • onPointerMove
      • onPointerUp
      • onPointerCancel
      • onGotPointerCapture
      • onLostPointerCapture
      • onPointerEnter
      • onPointerLeave
      • onPointerOver
      • onPointerOut

  • v16.5

    • Support for React DevTools Profiler
      • View rendering performance in a variety of views: flame chart, component chart, ranked chart, etc.
      • How long a component took to render
      • How many times a component re-rendered
      • Trace interactions

  • v16.6

    • Suspense for code splitting

    // This component is loaded dynamically
    const OtherComponent = React.lazy(() => import('./OtherComponent'));
    
    function MyComponent() {
      return (
        <React.Suspense fallback={<Spinner />}>
          <div>
            <OtherComponent />
          </div>
        </React.Suspense>
      );
    }

  • Coming soon:

    • React Hooks (~Q1 2019)
      • Allows you to write function components with local state and lifecycle hooks

      import { useState, useEffect } from 'react';
      
      function Example() {
        // create state variable and setter fn
        const [count, setCount] = useState(0);
      
        // Similar to componentDidMount and componentDidUpdate:
        useEffect(() => {
          // Update the document title using the browser API
          document.title = `You clicked ${count} times`;
        }, [count]);
      
        return (
          <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
              Click me
            </button>
          </div>
        );
      }

      • Good articles on hooks:
        • Under the hood of React's hooks system
        • Making Sense of React Hooks
    • Concurrent Mode (~Q2 2019)
    • Suspense for Data Fetching (~mid 2019)

Vue

• Vue surpassed React in Github stars
  • Vue: 124k
  • React: 119k
• Vue CLI 3.0 released in August (release announcement)
• Vue 3.0 announced
  • Roadmap
  • Planned release: End of Q2 2019
  • Features
    • Compiler rewrite
    • Added TSX for improved Typescript support
    • Speed, size, and memory improvements
    • Experimental Hooks API
    • Easier debugging with improved warnings and easier to trace re-renders

Angular

• Angular v6
  • New CLI commands
    • ng update - recommends dependency updates
    • ng add - adds new capabilites to you app like PWA or Angular Elements
  • Angular Elements
    • Register Angular components as custom elements
  • A lot of new Angular Material components
• Angular v7
  • Still no Ivy Compiler
    • Smaller, simpler, and faster
    • Tree shaking
  • Mostly bugfixes

Redux

Only one major release this year, version 4 in April. I'll highlight 3 things, although there are a lot more

• Updated TypeScript bindings
• Dropped support for IE < 11
• Dropped lodash dependency, so Redux became smaller by about 15% minified

Typescript

Lots of changes in TypeScript this year. The year started with 2.7, including TypeScript 3 being released on July 30. Mainly just want to cover the significant changes in Typescript 3+. You can follow these yourself on the What's new in TypeScript page

Added a new "unknown" type, treated like a type-safe "any".

// Only equality operators are allowed with unknown

function f10(x: unknown) {
    x == 5;
    x !== 10;
    x >= 0;  // Error
    x + 1;  // Error
    x * 2;  // Error
    -x;  // Error
    +x;  // Error
}

// No property accesses, element accesses, or function calls

function f11(x: unknown) {
    x.foo;  // Error
    x[5];  // Error
    x();  // Error
    new x();  // Error
}

Source

Support for defaultProps in JSX

TypeScript 2.9 and earlier didn’t leverage React defaultProps declarations inside JSX components. Users would often have to declare properties optional and use non-null assertions inside of render, or they'd use type-assertions to fix up the type of the component before exporting it.

export interface Props {
    name: string;
}

export class Greet extends React.Component<Props> {
    render() {
        const { name } = this.props;
        return <div>Hello ${name.toUpperCase()}!</div>;
    }
    static defaultProps = { name: "world"};
}

// Type-checks! No type assertions needed!
let el = <Greet />

Source

Version selection now possible

Allows package maintainers to support updated typescript types.

{
  "name": "package-name",
  "version": "1.0",
  "types": "./index.d.ts",
  "typesVersions": {
    ">=3.1": { "*": ["ts3.1/*"] }
  }
}

This package.json tells TypeScript to check whether the current version of TypeScript is running. If it's 3.1 or later, it figures out the path you've imported relative to the package, and reads from the package's ts3.1 folder. That's what that { "": ["ts3.1/"] } means - if you're familiar with path mapping today, it works exactly like that.

Source

Performance improvements

On a project we were working on this year, we were running into some big compile performance issues related to using React Material UI and interaction with TypeScript. There were some changes to TypeScript that came out of this that improved performance. Here is the Issue that explains it the best.

React Native

There are quite a few big things in the works for React Native for the future, but as far as what happened in 2018, mainly one big release 0.56 in July.

• Upgraded to Babel 7
• Updated to Android latest versions, resulting in faster builds and new Play Store reqs.
• Node 8 is now standard, along with React 16.4.
• Dropped iOS 8 support.
• Added lots of flow types

Some post 0.56 changes to note Full Changelog:

• Switched from using UIWebView to the newer MKWebView within the WebView component, and is pulled out into it's own separate repo now.
• Accessibility API improvements
• React up to 16.6.3 as of 0.57.8

Source: React Native blog "Releasing 0.56"

Javascript & Browser Features

Sources: Kaelan Cooter

ECMAScript 2018

• object rest/spread properties
  • Rest

  let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
  x; // 1
  y; // 2
  z; // { a: 3, b: 4 }

  • Spread

  let n = { x, y, ...z };
  n; // { x: 1, y: 2, a: 3, b: 4 }

• asynchronous iteration

for await (const line of readLines(filePath)) {
  console.log(line);
}

• Promise.finally

Browser Features

• OffscreenCanvasAPI
  • Chrome and Firefox (with flag)
  • Send canvas rendering to a web worker
• Web Animations API
  • Chrome, Firefox, and polyfill
  • Similar to jQuery's .animate() but built into the browser

  var options = {
    iterations: Infinity,
    iterationStart: 0,
    delay: 0,
    endDelay: 0,
    direction: 'alternate',
    duration: 700,
    fill: 'forwards',
    easing: 'ease-out',
  }
  var keyframes = [
    { opacity: 0 },
    { opacity: 1 }
  ];
  
  var element = document.querySelector('.animate-me');
  element.animate(keyframes, options);

• WebAssembly adoption has been slow
  • Binary instruction format with near-native performance. Use any language with a Web Assembly target
  • A good option for data-heavy applications
    • Image/video editing
    • Video games
    • VR
    • Encryption
  • C++, Rust, and Typescript are popular choices