Download pdf - With your bare hands

Transcript
Page 1: With your bare hands

WITH YOURBARE HANDS

@marcbaechinger

Dienstag, 11. Februar 14

Page 2: With your bare hands

github.com/marcbaechinger/barehands-workshop

Dienstag, 11. Februar 14

Page 3: With your bare hands

github.com/marcbaechinger/barehands-workshop

# git clone https://github.com/marcbaechinger/barehands-workshop.git

# git checkout ws-start-1

# git checkout ws-start-2

# git checkout ws-start-3

...

Dienstag, 11. Februar 14

Page 4: With your bare hands

github.com/marcbaechinger/barehands-workshop

# git clone https://github.com/marcbaechinger/barehands-workshop.git

# git checkout ws-start-1

# git checkout ws-start-2

# git checkout ws-start-3

...

live-coding step-1

Dienstag, 11. Februar 14

Page 5: With your bare hands

github.com/marcbaechinger/barehands-workshop

# git clone https://github.com/marcbaechinger/barehands-workshop.git

# git checkout ws-start-1

# git checkout ws-start-2

# git checkout ws-start-3

...

live-coding step-1

live-coding step-2

Dienstag, 11. Februar 14

Page 6: With your bare hands

github.com/marcbaechinger/barehands-workshop

# git clone https://github.com/marcbaechinger/barehands-workshop.git

# git checkout ws-start-1

# git checkout ws-start-2

# git checkout ws-start-3

...

live-coding step-1

live-coding step-2

Dienstag, 11. Februar 14

Page 7: With your bare hands

Dienstag, 11. Februar 14

Page 8: With your bare hands

Dienstag, 11. Februar 14

Page 9: With your bare hands

Dienstag, 11. Februar 14

Page 10: With your bare hands

Dienstag, 11. Februar 14

Page 11: With your bare hands

Dienstag, 11. Februar 14

Page 12: With your bare hands

learn about HTML, JavaScript and CSS

Dienstag, 11. Februar 14

Page 13: With your bare hands

learn about HTML, JavaScript and CSS

not about libraries or frameworks

Dienstag, 11. Februar 14

Page 14: With your bare hands

learn about HTML, JavaScript and CSS

not about libraries or frameworks

1st prio

2nd prio

Dienstag, 11. Februar 14

Page 15: With your bare hands

•modern browser APIs

• fully-scalable UIs with CSS3

• CSS3 transformations, animations and transitions

• some basic patterns for UI hacking (say: software engineering)

• combined OO and functional JavaScript style

• decent client-side build toolchain (asses, build, test)

Dienstag, 11. Februar 14

Page 16: With your bare hands

lets start our 90-minutes journeyto native browser land

80

Dienstag, 11. Februar 14

Page 17: With your bare hands

WHAT‘S COVERED?

Dienstag, 11. Februar 14

Page 18: With your bare hands

MVC derivates

bubbling events

decoupled communication

dataset and classList

Observable

CSS transitions

CSS transformations mixins

dependency injectionbasic component model

application controller DSL-like con!guration

basic namespaces function proxying

unobstrusive JSseparation of concerns

WHAT‘S COVERED?

Dienstag, 11. Februar 14

Page 19: With your bare hands

MISSING PIECES !!

Dienstag, 11. Februar 14

Page 20: With your bare hands

MISSING PIECES !!

observable model

client-side templating (two-way) data-binding

testability

Dienstag, 11. Februar 14

Page 21: With your bare hands

pitch a controller

Dienstag, 11. Februar 14

Page 22: With your bare hands

axiomatic rules - no talibanism, though

1a controller ,controls‘ a subtree of a document

controller

controllercontroller

controller2 leverage event bubbling

3decouple controllersby event-communication

Dienstag, 11. Februar 14

Page 23: With your bare hands

#ourMobileHypingCodingEndavour

application controller

list-view detail-view

controller controller

Dienstag, 11. Februar 14

Page 24: With your bare hands

#ourMobileHypingCodingEndavour

application controller

list-view detail-view

controller controller

Dienstag, 11. Februar 14

Page 25: With your bare hands

let‘s dive in

Dienstag, 11. Februar 14

Page 26: With your bare hands

WHAT‘S COVERED?

Dienstag, 11. Februar 14

Page 27: With your bare hands

MVC derivates

catch bubbling events

decoupled communication

dataset and classList

Observable

CSS transitions

CSS transformations mixins

dependency injectionbasic component model

application controller DSL-like con!guration

basic namespaces function proxying

unobstrusive JSseparation of concerns

WHAT‘S COVERED?

Dienstag, 11. Februar 14


Recommended