Interactive frontend development

Urmas Talimaa

SaleMove Inc

History

• First given in spring 2016 by
• Urmas Talimaa (SaleMove)
• Stenver Jerkku (currently at eAgronom)
• Spring 2017 by Urmas Talimaa (solo)
• Student feedback has said the course is hard
• Not a theoretical course, practical programming is expected
• Not going to be easy

Urmas Talimaa

• Developer at SaleMove
• Weekly Dungeons and Dragons
• Math and functional programming

Teaching assistant Älli

What’s SaleMove?

A bleeding edge tech company right here in Tartu

Business in US, Development in Tartu

The future of online Customer Experience

Teamviewer and skype straight in your browser with no installs

Course overview

• JavaScript
• Functions
• Classes
• Modules
• Build tools
• Testing
• React
• Redux
• Async code

What is expected of you?

• A lot of work!
• 3 EAP = 78 hours
• 16 hours on seminars
• 60 hours on homeworks - 7 homeworks, around 8 hours each
• 2 hours on exam
• No seminar on March 30
• No hand holding!
• Lots of googling
• Figure stuff out from zero
• Straight to the cold water!

​

Homeworks

• 7 Homeworks
• First one today!
• ~8 Hours on each homework
• Deadline - 11:59 the day of next seminar (before noon)
• Late submission max 6 points, must be submitted by 23:59 Sunday, same week as initial deadline.
• A catch-up application will be published on Monday, late submissions no longer accepted.

Homeworks

• Continue building the same application
• Have something to show off by the end
• To get the best results
• Follow deadlines
• Code style is important! What cannot be understood, cannot be graded.
• Buzzwords for resume

Communication

• Use Messageboard! https://www.quicktopic.com/52/H/AcxnBB9AyQrwf
• Sign up and post questions/answers in the topic above.
• Best way to learn is to help others

Grading

• 7 homeworks - up to 10 points each
• Exam - up to 30 points

Why build a JavaScript browser application?

• You probably don’t need a JavaScript application for your web page
• Seriously, don’t do this to yourself and your users
• Just use HTML and CSS
• Add minimal JavaScript when necessary (with fallbacks when JS disabled)

Why build a JavaScript browser application?

• Make sure that you have an application
• An interactive application
• … that communicates with other entities �in soft real time

​

Examples of websites that are not applications

• Your blog
• Your company’s website
• Advertisement for a product
• Standard ecommerce site
• ...

Examples of websites that could be applications

• Portal for playing chess
• Text editor
• Anything that needs offline processing
• Anything that is extremely chatty

Definitions

ECMAScript (ES) is a specification e.g ES5, ES6 ES7

JavaScript is a programming language (conforms to ECMAScript spec)

There are other languages that conform to different ECMAScript versions:

• ActionScript (Flash)

Different runtime engines for JavaScript

• SpiderMonkey (Firefox)
• V8 (Chrome, Node.JS, MongoDB)
• Chakra (Edge)

Definitions

Document Object Model (DOM) is an interface for programming HTML documents (also XML and SVG)

Can be used to interact with the web page in a web browser

JavaScript Tooling

• Changing very fast
• Many competing tools
• Has become a bit more standardized in the last years
• https://hackernoon.com/a-map-to-modern-javascript-development-2017-16d9eb86309c
• https://github.com/addyosmani/es6-tools

JavaScript Tooling

Generally you have a task runner/build tool �that invokes a transpiler to transform source code to ES5 compliant JavaScript and then calls a module bundler that gathers modules into one or more JavaScript files that can be loaded in a browser.

JavaScript files are served by an asset server which might also be providing live reloading.

User loads a HTML file which requires a JavaScript file that either includes all your modules or loads some immediately and some later on demand.

JavaScript Tooling

ES6

Robot

ES7

App

Transpiler

ES5

Robot

ES5

App

Module bundler

ES5

bundle.js

Asset server

Web Browser

<script src=’public/bundle.js’>

How to get libraries?

NodeJS, JS in the backend

• In the beginning, JavaScript engines were limited to browsers
• NodeJS - run javascript everywhere!
• Everything that can be written in JavaScript will be (not that this is a good idea)
• NodeOS, PDFkit, Remote control for car, Online games, Collaborative drawing, etc
• Quality of libraries varies wildly (leaning to dumpster level)
• No DOM as there is no HTML document
• node app.js // Evaluate app.js in NodeJS
• https://nodejs.org/en/download/
• Grab version 8.10 or later
• For building and testing

JavaScript Tooling - Packages

• Node Package Manager - NPM
• Both registry: https://www.npmjs.com/
• And package manager https://docs.npmjs.com/getting-started/what-is-npm
• A new package manager is Yarn
• Uses same registry https://www.npmjs.com/
• Much faster
• Package installation algorithm is more deterministic
• Both use the same manifest file: package.json
• Similarities are for people to be able to switch over with ease

JavaScript Tooling - Yarn

• Specify manifest and install libraries
• Specify an allowed version range for each library
• Versions (of good libraries) adhere to semantic versioning
• Split production/development dependencies
• Project local packages are installed into ./node_modules folder
• Exact versions are listed in yarn.lock
• Can also install global packages to be used across system

JavaScript Tooling - Yarn

https://yarnpkg.com/en/docs/cli/

• yarn --help
• See all commands
• yarn install
• Install all packages described in package.json
• yarn add react
• Install react package and mark it as dependency in package.json
• yarn add mocha --dev
• Install mocha package and mark it as devDependency in package.json.
• yarn global add webpack
• Install webpack package globally - can be used from anywhere in the system

​

How to import other files?

ECMAScript 6 or ECMAScript 2015

• “New” javascript standard
• Browser compatibility varies, can be used with a transpiler
• https://github.com/lukehoban/es6features

JavaScript in general has become fluid, different browser versions supporting different features/syntax

ECMAScript 6 or ECMAScript 2015

• Classes class Foo extends Bar {..}
• Template literals - string interpolation(`Hello ${name}`)
• Destructuring var {op, lhs, rhs} = getASTNode()
• let - block scoped variable
• const - immutable variables
• modules
• Iterators, generators

JavaScript Tooling - Modules

JavaScript runs in the browser, no native modules

ES6 has finalized module syntax http://www.2ality.com/2014/09/es6-modules-final.html

Previously there were competing standards:

• CommonJS (Used in NodeJS)
• Asynchronous Module Definition (AMD)
• ES6 modules

​

JavaScript Tooling - Modules

• Named
• export Foo;
• import {Foo} from ‘./Foo’;
• Default
• export default Foo;
• import Foo from ‘./Foo’;

Promise-based asynchronous loading using System.import (used later in the course)

Example

Building - Webpack

JavaScript Tooling - Transpilers

Compiling: Transforming source code to a language on another level of abstraction (e.g from C to machine code)

Transpiling: Transforming source code to a language on a similar level of abstraction

JavaScript Tooling - Transpilers

Write JavaScript how you want and still have all the browsers running your code.

• Babel
• Traceur

Examples of languages that transpile to JavaScript (ES5):

• ES6
• TypeScript (~typed ES6)
• PureScript (haskell-like)
• ClojureScript (clojure-like)

JavaScript Tooling - Build tools

Everything about your build should be repeatable

https://stateofjs.com/2017/build-tools/results

• Takes care of all steps in your pipeline:
• Transpiling,
• bundling modules,
• minifying,
• generating documentation etc
• Usually plugins are used to perform singular tasks
• Use what you like, but a build tool should have no effect on source code

Example continued

Building - Babel

Live reload

• Every time you need to change JS, you need to recompile
• Most build tools offer some sort of auto-reload mechanism
• Webpack
• Webpack dev server - https://webpack.js.org/configuration/dev-server/
• It is also possible to do hot module replacement for React, reloading JS code without reloading the page. However everything about this is in beta and it can break unexpectedly .
• https://webpack.js.org/concepts/hot-module-replacement/
• https://webpack.js.org/guides/hot-module-replacement/
• https://github.com/gaearon/react-hot-loader

Transpiler

Module bundler

Asset server

Web Browser

<script src=’dist/bundle.js’>

ES6

Robot

Filesystem watcher

1. File changes

2. Rebuild

3. Notify via Websocket

4. Reload

Example continued

Building - Webpack Dev Server

Source maps

A source map tells the browser what the original source code looked like and how do the different functions and classes map to the generated final file (app.js). Errors/console statements point to lines in the source code instead of the generated file. It greatly simplifies developing, especially when using transpilation.

​

Source maps need to be configured in the build tool.

​

Building example continued - Source Maps

CSS

• This course it not going to make you a designer
• Minimal usage of layout techniques is required
• Luckily flexbox makes things (more or less) easy
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• http://flexboxfroggy.com/

CSS modules

• Maintainable Stylesheets need modules like JavaScript
• This course is not going to teach how to write maintainable CSS
• https://github.com/css-modules/css-modules

CSS modules code example

Lint

• Lint origin
• Detects problems before running unit tests or manual testing
• Can enforce style and formatting
• Comparison of JavaScript linters
• Linting code example

Unit tests

• Code that isn’t tested can’t be believed
• Manual verifications are inconsistent and take a long time
• Could have a separate course on how to write unit tests
• Pure functions and declarative code are easier to test
• Little to no setup required
• Input and output clearly defined, no side effects

Unit tests

• There are very many tools to run JavaScript tests
• Some run tests in an actual browser
• Some run them in NodeJS
• Different defaults and configuration options
• Mocha is simple and easy to start with
• There are also a variety of assertion libraries which simplify checking test results
• Chai is pretty popular and integrates well with Mocha.
• Unit testing code example

Manual DOM manipulation

• document.querySelector(cssSelector)
• Accepts CSS Selectors http://www.w3schools.com/cssref/css_selectors.asp
• Returns first match or null
• document.querySelectorAll(cssSelector)
• document.createElement(tagName)
• Element.appendChild(otherElement)
• Element.innerHTML = htmlString
• Element.onclick = myFunction;

const myDiv = document.querySelector(“#my-div”);�myDiv.innerHTML = “my-text’;�myDiv.onclick = function(){ myDiv.innerHTML = ‘clicked!’; };

​

Manual DOM manipulation

DOM can only be manipulated when it has been parsed (DOM is ready)

function doWork() { … }�if (document.readyState === "complete") {� doWork();�} else { � document.addEventListener("DOMContentLoaded", doWork);�}

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

"Running your code at the right time"

<script … defer=true> is simplest option to defer JavaScript execution until DOM is ready

Running scripts using yarn

• Don’t force user to install global packages before starting your web app
• Also don’t expect them to know what exact tools in what configuration YOU used
• Define “scripts” for repeated actions in package.json

“scripts”: {� “test”: “mocha ./test/”� “start”: “webpack-dev-server --open --config webpack.config.js”,�}

Homework

Requirements

Deadline 23/03/2017 11:59

Only submit what is yours

Only assume that NodeJS v8.10 is available locally

Feel free to use tools other than described (provided they are installed with yarn install), but don’t expect full support or less-strict grading if you do. If you need to provide further information, include it in README.md.

Submit zipped file to https://courses.cs.ut.ee/2018/react/Main/Submit

Don’t include node_modules or .git/, .hg/, .svn/, make sure that your zipped file size is reasonable

You can use/modify/extend this script (usage: node zipHomework.js) to automate creating a zip file without specific folders.

​

Homework solution

DEMO