DANIEL GRAHAM PHD MOBILE APPLICATION DEVELOPMENT THREE MAJOR COMPETITORS WRITE ONCE RUN EVERYWHERE REACT NATIVE SEEMS TO BE WINNING OVERVIEW OF THE CLASS

• INTROUCTION TO FUNCTIONAL PROGRAMMING

• Javascript (Deep Dive)

• APPLICATION ARCHITECTURE

• Functional Components

• Class-based Component

• DATA FLOW ARCHITECTURE

• Redux /Flux

• Real-time No SQL Databases: Collections and Documents

• Pub/Suv Architecture JAVASCRIPT

• JAVASCRIPT is interpreted and dynamically typed

• Conforms to the ECMAScript standard that was original developed by oracle Latest release June 2018.

• https://www.youtube.com/watch?v=0opjPdK55QA Brain Terlson

• https://github.com/tc39

• Each browser has it’s own javascript engine

• Chrome: V8 ECMAScript • Firefox: Spider Monkey

• : Chakra Javascript Actionscript

• Also transpilers that go Google App Script

Typescript /Coffee Script to Javascript JAVASCRIPT SYNTAX

• Live Coding Session

• Chrome developer console (Right Click Inspect)

• Node command line JAVASCRIPT SYNTAX VARIABLES

const name = "Daniel" IMMUTABLE console.log(name)

name = "Daniel" SAME AS THE LET DECLARATION console.log(name)

var name = "Daniel" WHAT IS DIFFERENCE console.log(name) BETWEEN VAR AND LET

let name = "Daniel" console.log(name) JAVASCRIPT SYNTAX VARIABLES

const name = "Daniel" console.log(name) SEMICOLONS ARE OPTIONAL IN JAVASCRIPT name = “Daniel”; console.log(name) JAVASCRIPT LET VS VAR

for (i = 0; i < 5; i++) { for (i = 0; i < 5; i++) { var count = i; let count = i; } } console.log(count) console.log(count)

PRINT 5 PRINTS NOTHING TYPES IN JAVASCRIPT

• Remember Javascript is dynamically types

• There are 5 primitive types (which are immutable)

NUMBER • typeof 5

STRING • typeof “test”

BOOLEAN • typeof true

NULL • typeof null (Strange behavior returns type object) UNDEFINED

• • All other values are objects JAVASCRIPT LET VS VAR

Block scope Block scope var name = "Daniel" let name = "Daniel"

console.log(name) console.log(name)

Prints: Daniel Prints:

LEXICAL SCOPING JAVASCRIPT SYNTAX OPERATORS

"A" === "\u0041" \U ALLOWS YOU SPECIFY THE UNICODE VALUE AND True === IS USE FOR COMPARISON

"A" !== "\u0041"

False JAVASCRIPT === VS ==

5 == "5" TRUE

0 == false TRUE Why is this happening?

" \n\n" == 0 TRUE Type coercion.

5 === "5" FALSE What is type coercion? 0 === false FALSE

" \n\n" === 0 FALSE JAVASCRIPT SYNTAX COERCION

• Type Coercion is similar to type casting:

• Converting from type to another.

• There are two types implicit and explicit conversion JAVASCRIPT SYNTAX COERCION

let x = 3 let y = "3" IMPLICIT CONVERSION console.log(x + y)

let x = 3 EXPLICIT CONVERSION let y = "3" console.log(String(x) + y) FUNCTIONS IN JAVASCRIPT “The Best thing about Javascript is its implementation of functions.”

–DOUGLAS CROCKFORD CREATING A SIMPLE FUNCTION

function grow (last, increase){ NAMED FUNCTION return last*(1+increase) }

console.log(grow(0.7, 0.1)) PRINTS 0.77

WHEN FUNCTIONS ARE DECLARED OUTSIDE OF THE SCOPE OF CLASS WE NEED THE FUNCTION KEYWORD FUNCTIONS ARE OBJECTS

SINCE FUNCTIONS ARE OBJECTS THEY CAN BE USED LIKE OTHER OBJECTS

career = function grow (lastyear, increase){ return last*(1+increase) };

console.log(career(0.7, 0.1))

Since this is an assignment statement you may sometimes see ; at the end But ; aren’t necessary ANONYMOUS FUNCTIONS

NO NAME

career = function(last, increase){ return last*(1+increase) }

console.log(career(0.7, 0.1))

ANONYMOUS FUNCTIONS THE DEFAULT ARGUMENT PARAMETERS

MULTIPLE VARIABLE DECLARATIONS

sum = function(){ let i , sum = 0 for(i = 0; i < arguments.length; i+=1){ sum += arguments[i] } return sum }

console.log('The sum was ' + sum(1,2,3,4,5))

PRINTS 15

The arguments variable contains an array of all of the arguments passed to the function ARROW FUNCTIONS ARROW FUNCTIONS

let func = (arg1, arg2, ...argN) => expression

General Form of

let func = function(arg1, arg2, ...argN) { return expression; } ARROW FUNCTIONS

multiply = (a, b) => a * b

//Equivalent to

multiply2 = function(a, b){ return a * b } Single parameters square = a => multiply(a, a) don’t require brackets

SINGLE LINE ARROW FUNCTION THE VALUE OF THE EXPRESSION IS RETURNED BY DEFAULT MULTIPLE LINE ARROW FUNCTIONS

(a, b) =>{ if (a >= b){ return a }else{ ARROW FUNCTIONS CAN return b BE ANONYMOUS } }

bigger = (a, b) =>{ return a>=b ? a : b }

console.log(bigger(1, 3))