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.

767450215aa2f669a3dcaefa5beb4643?s=128

Andrew Pinkham

August 16, 2017
Tweet

Transcript

  1. UNDERSTANDING
 JAVASCRIPT VIA REACT DJANGOCON US 2017

  2. $ whoami ANDREW PINKHAM ▸ Author of Django Unleashed ▸

    Founder of JamBon Software ▸ CertCycle
  3. UNDERSTANDING
 JAVASCRIPT VIA REACT DJANGOCON US 2017

  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
  5. None
  6. 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)
  7. I DID NOT
 UNDERSTAND THE PROBLEM

  8. HOW DID THIS HAPPEN DJANGO ▸ I need to build

    a website. What should I use? ▸ Oh, you should use Django.
  9. 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.
  10. 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.
  11. WHAT IS THE PROBLEM?

  12. 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
  13. 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
  14. 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
  15. 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
  16. JAVASCRIPT JAVASCRIPT IN DIFFERENT BROWSERS ▸ JQuery ▸ Mootools

  17. 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
  18. JAVASCRIPT TRANSPILERS ▸ Babel JS for ES 6 to ES5

    ▸ Bublé ▸ CoffeeScript and TypeScript
  19. JAVASCRIPT BUNDLES [AND PIPELINES] ▸ [Grunt or Gulp] and Browserify

    ▸ Webpack (for apps) ▸ Rollup (for libraries)
  20. JAVASCRIPT ENVIRONMENT TOOLS ▸ Package Managers ▸ NPM ▸ Yarn

    ▸ PNPM ▸ Linters ▸ JSLint and JSHint ▸ ESLint
  21. 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?
  22. 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')

  23. 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
  24. JS FRAMEWORKS VANILLA JS M V C HTML JavaScript

  25. 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
  26. JS FRAMEWORKS ANGULAR V C HTML Angular

  27. JS FRAMEWORKS REACTIVE PROGRAMMING ▸ RxJS and CycleJS ▸ Streams

    or Observables ▸ Inputs over time ▸ Functions defined at beginning that operate over time
  28. JS FRAMEWORKS CYCLE AND REACTIVE JS V C HTML JavaScript

    Actions
 over Time
  29. 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
  30. JS FRAMEWORKS REACT V C HTML React
 Virtual Dom State

    M
  31. JS FRAMEWORKS REACT V M React

  32. JS FRAMEWORKS REACT

  33. REACT ECOSYSTEM WHAT TO USE WITH REACT ▸ JSX -

    Syntactic sugar to declare HTML ▸ Redux & React-Redux (Reducer/Accumulator)
  34. JS FRAMEWORKS REACT V M React & JSX Redux &

    React-Redux
  35. REACT ECOSYSTEM WHAT TO USE WITH REACT ▸ Redux Thunk

    (Asynchronous Actions) ▸ Fetch Polyfill (XMLHttpRequest Replacement) ▸ Redux Forms (HTML form handling) ▸ Redux Logger
  36. REACT ECOSYSTEM TESTING WITH REACT ▸ Browser vs Node ▸

    Browser: Karma with Jasmine or Mocha ▸ Browser: Webdriver.io ▸ Node: Jest
  37. 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
  38. 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
  39. STARTING ANEW AVOID ALL THIS CONFIG ▸ create-react-app ▸ Yarn

    compatible, Webpack & Babel, ESLint, and Jest ▸ JSX and React ▸ Redux must be installed
  40. JAVASCRIPT FUTURE WHAT'S COMING NEXT? ▸ Performance: InfernoJS and Svelte

    ▸ React Fiber ▸ But what of React patents and OSS? ▸ Vue JS?
  41. THANK YOU! @andrewsforge http://andrewsforge.com