M O B I L E A P P L I C AT I O N D E V E L O P M E N T

D A N I E L G R A H A M P H D

T H R E E M A J O R C O M P E T I T O R S

W R I T E O N C E R U N E V E R Y W H E R E

R E A C T N AT I V E S E E M S T O B E W I N N I N G

O V E R V I E W O F T H E C L A S S

• 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

J AVA S C R I P T

• 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

• Firefox: Spider Monkey

• Internet Explorer: Chakra

• Also transpilers that go

ECMAScript

Javascript Actionscript

Google App Script

Typescript /Coffee Script to Javascript

J AVA S C R I P T S Y N TA X

• Live Coding Session

• Chrome developer console (Right Click Inspect)

• Node command line

J AVA S C R I P T S Y N TA X VA R I A B L E S

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

var name = "Daniel" console.log(name)

let name = "Daniel" console.log(name)

W H AT I S D I F F E R E N C E B E T W E E N VA R A N D L E T

name = "Daniel" console.log(name)

S A M E A S T H E L E T D E C L A R AT I O N

I M M U TA B L E

J AVA S C R I P T S Y N TA X VA R I A B L E S

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

name = “Daniel”; console.log(name)

S E M I C O L O N S A R E O P T I O N A L I N J AVA S C R I P T

J AVA S C R I P T L E T V S VA R

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

P R I N T 5 P R I N T S N O T H I N G

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

T Y P E S I N J AVA S C R I P T

• Remember Javascript is dynamically types

• There are 5 primitive types (which are immutable)

• typeof 5

• typeof “test”

• typeof true

• typeof null (Strange behavior returns type object)

•

N U M B E R

S T R I N G

B O O L E A N

NULL

U N D E F I N E D

• All other values are objects

J AVA S C R I P T L E T V S VA R

var name = "Daniel"

Block scope

console.log(name)

Prints: Daniel

let name = "Daniel"

Block scope

console.log(name)

Prints:

L E X I C A L S C O P I N G

J AVA S C R I P T S Y N TA X O P E R AT O R S

"A" === "\u0041"\ U A L L O W S Y O U S P E C I F Y T H E

U N I C O D E VA L U E A N D = = = I S U S E F O R C O M PA R I S O N True

"A" !== "\u0041"

False

J AVA S C R I P T = = = V S = =

5 == "5" T R U E

0 == false T R U E

5 === "5" FA L S E

0 === false FA L S E

Why is this happening?

Type coercion." \n\n" == 0 T R U E

" \n\n" === 0 FA L S E

What is type coercion?

J AVA S C R I P T S Y N TA X C O E R C I O N

• Type Coercion is similar to type casting:

• Converting from type to another.

• There are two types implicit and explicit conversion

J AVA S C R I P T S Y N TA X C O E R C I O N

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

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

I M P L I C I T C O N V E R S I O N

E X P L I C I T C O N V E R S I O N

F U N C T I O N S I N J AVA S C R I P T

– D O U G L A S C R O C K F O R D

“The Best thing about Javascript is its implementation of functions.”

C R E AT I N G A S I M P L E F U N C T I O N

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

W H E N F U N C T I O N S A R E D E C L A R E D O U T S I D E O F T H E S C O P E O F C L A S S W E N E E D T H E F U N C T I O N K E Y W O R D

console.log(grow(0.7, 0.1))

N A M E D F U N C T I O N

P R I N T S 0 . 7 7

F U N C T I O N S A R E O B J E C T S

S I N C E F U N C T I O N S A R E O B J E C T S T H E Y C A N B E U S E D L I K E O T H E R O B J E C T S

Since this is an assignment statement you may sometimes see ; at the end

But ; aren’t necessary

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

console.log(career(0.7, 0.1))

A N O N Y M O U S F U N C T I O N S

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

console.log(career(0.7, 0.1))

A N O N Y M O U S F U N C T I O N S

N O N A M E

T H E D E FA U LT A R G U M E N T PA R A M E T E R S

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

P R I N T S 1 5

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

M U LT I P L E VA R I A B L E D E C L A R AT I O N S

A R R O W F U N C T I O N S

A R R O W F U N C T I O N S

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

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

General Form of

A R R O W F U N C T I O N S

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

//Equivalent to

multiply2 = function(a, b){ return a * b }

S I N G L E L I N E A R R O W F U N C T I O N T H E VA L U E O F T H E E X P R E S S I O N

I S R E T U R N E D B Y D E FA U LT

square = a => multiply(a, a) Single parameters

don’t require brackets

M U LT I P L E L I N E A R R O W F U N C T I O N S

(a, b) =>{ if (a >= b){ return a }else{ return b } }

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

console.log(bigger(1, 3))

A R R O W F U N C T I O N S C A N B E A N O N Y M O U S