Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Understanding JavaScript Libraries via React and the React Ecosystem

Understanding JavaScript Libraries via React and the React Ecosystem

After an initial foray into JavaScript in 2011, I actively avoided learning or using JavaScript. Then, in early 2017, JamBon Software took on a project to build a bleeding-edge JavaScript web app in Facebook’s React. Suddenly, I did not have a choice and had to learn JavaScript—versions 5 and 6—as well as Facebook’s React library with the entire JavaScript and React ecosystems behind it.

This talk will give developers a framework to analyze the overwhelming number of tools in the JavaScript world by categorizing the types of problems currently being solved. By the end, you’ll walk away with a mental framework of the solutions being built today.

Andrew Pinkham

August 16, 2017
Tweet

More Decks by Andrew Pinkham

Other Decks in Programming

Transcript

  1. UNDERSTANDING

    JAVASCRIPT
    VIA REACT
    DJANGOCON US 2017

    View full-size slide

  2. $ whoami
    ANDREW PINKHAM
    ▸ Author of Django Unleashed
    ▸ Founder of JamBon Software
    ▸ CertCycle

    View full-size slide

  3. UNDERSTANDING

    JAVASCRIPT
    VIA REACT
    DJANGOCON US 2017

    View full-size slide

  4. OUTLINE
    TALK OUTLINE
    ▸ How did this happen?
    ▸ Brief History of the Web
    ▸ JavaScript (and HTML)
    ▸ JavaScript Frameworks (including React)
    ▸ React's Ecosystem
    ▸ React and Django
    ▸ The Future

    View full-size slide

  5. HOW DID THIS HAPPEN
    TASKED WITH:
    ▸ Learn JavaScript
    ▸ Learn the JavaScript Ecosystem
    ▸ Pick a Framework
    ▸ Build a dynamic frontend website to communicate with an
    API via REST (the Django bit)

    View full-size slide

  6. I DID NOT

    UNDERSTAND THE
    PROBLEM

    View full-size slide

  7. HOW DID THIS HAPPEN
    DJANGO
    ▸ I need to build a website. What should I use?
    ▸ Oh, you should use Django.

    View full-size slide

  8. HOW DID THIS HAPPEN
    DJANGO
    ▸ I need to build a a software application that communicates
    with other computers over the HTTP protocol by providing
    HTML and CSS documents to those computers. What
    should I use?
    ▸ I recommend the Django framework, because it supplies
    all the code you need to communicate via HTTP, and it
    provides methods to rapidly produce HTML and package
    CSS for that HTML.

    View full-size slide

  9. HOW DID THIS HAPPEN
    JAVASCRIPT
    ▸ I need to build a dynamic frontend. What should I use?
    ▸ Oh, you should use Angular/React/Vue/RxJS/CycleJS.

    View full-size slide

  10. WHAT IS THE
    PROBLEM?

    View full-size slide

  11. BRIEF HISTORY OF THE WEB
    HTML
    ▸ HTML first appears in 1991
    ▸ Mosaic, Netscape Navigator, Internet Explorer
    ▸ HTML is intended to share documents: provides the
    Document Object Model (DOM), directed graph of nodes
    ▸ HTML provides the content and structure of a document
    ▸ Loosely analogous to Model (content) and View (structure)
    ▸ CSS is first proposed in 1994; spec released in Dec 1996

    View full-size slide

  12. BRIEF HISTORY OF THE WEB
    JAVASCRIPT
    ▸ JavaScript built in 10 days as "glue language" to cement
    partnership between Sun and Netscape against Microsoft
    in 1995
    ▸ Brendan Eich wants to put Scheme in the browser; politics
    give it Java-like syntax and the name (JavaScript).
    Prototypal inheritance is taken from Self.
    ▸ JavaScript is built to manipulate the DOM
    ▸ JavaScript spec changes over time

    View full-size slide

  13. BRIEF HISTORY OF THE WEB
    THE PROBLEMS
    ▸ JavaScript redefines known vocabulary and is better
    conceptualized as a functional language
    ▸ JavaScript is implemented in different browsers with
    slightly different features
    ▸ HTML's DOM is a directed graph with it's own hidden state
    and event handling; HTML differs across browsers
    ▸ HTML is both the state and display of the program

    View full-size slide

  14. JAVASCRIPT
    JAVASCRIPT QUIRKS
    ▸ A human/developer problem
    ▸ Read Douglas Crockford's "JavaScript: the Good Parts"
    ▸ Read Eric Elliott's "Programming JavaScript Applications"
    ▸ Read Kyle Simpson's JavaScript Series
    ▸ FrontEnd Masters and Egghead.io

    View full-size slide

  15. JAVASCRIPT
    JAVASCRIPT IN DIFFERENT BROWSERS
    ▸ JQuery
    ▸ Mootools

    View full-size slide

  16. JAVASCRIPT
    DIFFERENT LANGUAGE VERSIONS
    ▸ EcmaScript (ES) and TC39
    ▸ ES 3 or 5 in browsers
    ▸ ES 6 and 7... but you can't upgrade the browser!
    ▸ Write ES 6 or 7, but ship ES 5?
    ▸ Compiler JS to JS - "transpilation"
    ▸ Bundle namespaced JS into single file

    View full-size slide

  17. JAVASCRIPT
    TRANSPILERS
    ▸ Babel JS for ES 6 to ES5
    ▸ Bublé
    ▸ CoffeeScript and TypeScript

    View full-size slide

  18. JAVASCRIPT
    BUNDLES [AND PIPELINES]
    ▸ [Grunt or Gulp] and Browserify
    ▸ Webpack (for apps)
    ▸ Rollup (for libraries)

    View full-size slide

  19. JAVASCRIPT
    ENVIRONMENT TOOLS
    ▸ Package Managers
    ▸ NPM
    ▸ Yarn
    ▸ PNPM
    ▸ Linters
    ▸ JSLint and JSHint
    ▸ ESLint

    View full-size slide

  20. JAVASCRIPT
    STARTING STACK
    ▸ Babel for ES 6 transpilation
    ▸ Webpack for bundling
    ▸ ESLint for linting
    ▸ Yarn for package management? NPM has fixed the issue?
    What about PNPM?

    View full-size slide

  21. MAKE SURE WE'RE ON THE SAME PAGE
    NOMENCLATURE
    ▸ Library: a codebase that you call from your code
    (requests)
    def main():

    r = requests.get(

    'http://placekitten.com/300/300')
    ▸ Framework: a codebase that calls your code (Django)
    def a_django_view(request):

    return render(request, 'template.html')


    View full-size slide

  22. THIS IS YOUR REMINDER THAT
    THE DOM IS ACTUALLY A
    GIANT, MUTABLE, GLOBAL
    VARIABLE IN THE MIDDLE OF
    YOUR PROGRAM.
    @polotek Marco Rogers
    BRIEF HISTORY OF WEB

    View full-size slide

  23. JS FRAMEWORKS
    VANILLA JS
    M V C
    HTML JavaScript

    View full-size slide

  24. JS FRAMEWORKS
    MODEL VIEW CONTROLLER
    ▸ Angular Framework
    ▸ Referred to as MVC
    ▸ JavaScript is a separate Controller
    ▸ Annotate HTML with custom tags (directives) to split
    single variable (DOM) until smaller scopes
    ▸ Two-way binding
    ▸ Content is dynamic; structure of app still in HTML

    View full-size slide

  25. JS FRAMEWORKS
    ANGULAR
    V C
    HTML Angular

    View full-size slide

  26. JS FRAMEWORKS
    REACTIVE PROGRAMMING
    ▸ RxJS and CycleJS
    ▸ Streams or Observables
    ▸ Inputs over time
    ▸ Functions defined at beginning that operate over time

    View full-size slide

  27. JS FRAMEWORKS
    CYCLE AND REACTIVE JS
    V
    C
    HTML
    JavaScript
    Actions

    over Time

    View full-size slide

  28. JS FRAMEWORKS
    FACEBOOK'S REACT
    ▸ React Library
    ▸ Said to be the View in an MVC app
    ▸ Defines a "Flux Architecture"
    ▸ Virtual DOM
    ▸ Single direction of information

    View full-size slide

  29. JS FRAMEWORKS
    REACT
    V
    C
    HTML
    React

    Virtual Dom
    State
    M

    View full-size slide

  30. JS FRAMEWORKS
    REACT
    V
    M
    React

    View full-size slide

  31. JS FRAMEWORKS
    REACT

    View full-size slide

  32. REACT ECOSYSTEM
    WHAT TO USE WITH REACT
    ▸ JSX - Syntactic sugar to declare HTML
    ▸ Redux & React-Redux (Reducer/Accumulator)

    View full-size slide

  33. JS FRAMEWORKS
    REACT
    V
    M
    React & JSX
    Redux
    & React-Redux

    View full-size slide

  34. REACT ECOSYSTEM
    WHAT TO USE WITH REACT
    ▸ Redux Thunk (Asynchronous Actions)
    ▸ Fetch Polyfill (XMLHttpRequest Replacement)
    ▸ Redux Forms (HTML form handling)
    ▸ Redux Logger

    View full-size slide

  35. REACT ECOSYSTEM
    TESTING WITH REACT
    ▸ Browser vs Node
    ▸ Browser: Karma with Jasmine or Mocha
    ▸ Browser: Webdriver.io
    ▸ Node: Jest

    View full-size slide

  36. DJANGO AND REACT
    WHO CONTROLS THE DOM?
    ▸ Django API
    ▸ Easy
    ▸ Django Templates
    ▸ but React owns the DOM
    ▸ Precomputing React?
    ▸ Webpack bundles? (for cache busting)
    ▸ Watch Julien Phalip's talk about React and Django

    View full-size slide

  37. CONCLUSION
    JAVASCRIPT'S PROBLEM IS THE DOM
    ▸ Frameworks seek to provide a mental framework to allow
    developers to avoid the perils of modifying a global
    variable that also counts as the structure and display of the
    app
    ▸ Appears to me to be an increasing tendency to provide a
    single direction, instead of two-way bindings
    ▸ However, still good reasons to use two-way binding
    frameworks, as they may provide better solution for your
    interface

    View full-size slide

  38. STARTING ANEW
    AVOID ALL THIS CONFIG
    ▸ create-react-app
    ▸ Yarn compatible, Webpack & Babel, ESLint, and Jest
    ▸ JSX and React
    ▸ Redux must be installed

    View full-size slide

  39. JAVASCRIPT FUTURE
    WHAT'S COMING NEXT?
    ▸ Performance: InfernoJS and Svelte
    ▸ React Fiber
    ▸ But what of React patents and OSS?
    ▸ Vue JS?

    View full-size slide

  40. THANK YOU!
    @andrewsforge
    http://andrewsforge.com

    View full-size slide