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 • Internet Explorer: 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)) .