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))