Intro to UI development

Preamble

This document has a lot of key words, and is not necessarily written to be digested alone, but with an accompanying presentation. That being said, there are a lot of concepts that come with web development, and knowledge of their existence + independent investigation will undoubtably prove valuable in terms of personal web development growth.

A brief overview and history of the web

• NPM and node – a land of libraries and servers
• Client-side vs Server-side
  • Where does JavaScript run?
• Intro to EcmaScript https://en.wikipedia.org/wiki/ECMAScript
  • Functions are first class
  • A word about objects https://www.w3schools.com/js/js_object_definition.asp
• ES5+
  • Classes (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes - functions with sugar)
• ES9
  • Spread operator (..var)
  • destructuring, i.e const { namespace, onSuccess, currentCluster } = this.props
• What is vanilla Javascript?
• HTML, CSS, JavaScript
  • https://www.w3schools.com/howto/howto_js_slideshow.asp
  • The bread and butter of early-day web development. Provides separation of responsibilities, but still brittle and hard to re-use...
• Productionalization
  • Babel, transpilation, and webpack (uglification and minification too!)

Web frameworks

• Angular, Vue, React, Aurelia, Ember, etc
• Frameworks allow re-useable components!!
  • Css, html, and JavaScript are grouped logically into functional componentsin a programmer-friendly manner
  • Logic (and control flow like for and if statements!) allowed in structure

Benefits of react

• React is syntactic sugar on JsX, with other helper libraries
  • Simple example - https://www.npmjs.com/package/react-dom
• Advanced concepts - Component life-cycle, props, and state
  • https://reactjs.org/docs/react-component.html
  • Constructor, Render, DidMount, WillUnmount
• Additional libraries - react hyperscript helpers

Libraries/Concepts we use

• Lodash (FP https://lodash.com/)
• Functional Components/Hooks (https://reactjs.org/docs/hooks-overview.html)
• Await/async keywords (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)

Development tips and tricks

• Web console, Web console, Web console.
  • Source tab, Breakpoints!
  • Console tab, aka REPL
  • Network tab and Curl
• pointing the UI to your fiab
• The web has great documentation! (w3schools, mozilla, react docs, etc)

Miscellaneous (outdated) topics (that may come up in your web adventures)

• XML HTTP Requests
• Ajax - https://www.w3schools.com/js/js_ajax_intro.asp
• JQuery – powerful debugging tool
• Redux – something often used with react for state management