Embed Size (px)
DESCRIPTION
Slides from the live coding talk at the Zühlke Software Engineering Days (SWE Days, Okt 2013). The live coding part (see github url in the slides) demonstrated how to hack a browser mvc app in the you-might-not-need-jquery sense (say: no libraries). With your bare hands!
Citation preview
WITH YOURBARE HANDS
@marcbaechinger
Dienstag, 11. Februar 14
github.com/marcbaechinger/barehands-workshop
Dienstag, 11. Februar 14
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
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
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
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
Dienstag, 11. Februar 14
Dienstag, 11. Februar 14
Dienstag, 11. Februar 14
Dienstag, 11. Februar 14
Dienstag, 11. Februar 14
learn about HTML, JavaScript and CSS
Dienstag, 11. Februar 14
learn about HTML, JavaScript and CSS
not about libraries or frameworks
Dienstag, 11. Februar 14
learn about HTML, JavaScript and CSS
not about libraries or frameworks
1st prio
2nd prio
Dienstag, 11. Februar 14
•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
lets start our 90-minutes journeyto native browser land
80
Dienstag, 11. Februar 14
WHAT‘S COVERED?
Dienstag, 11. Februar 14
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
MISSING PIECES !!
Dienstag, 11. Februar 14
MISSING PIECES !!
observable model
client-side templating (two-way) data-binding
testability
Dienstag, 11. Februar 14
pitch a controller
Dienstag, 11. Februar 14
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
#ourMobileHypingCodingEndavour
application controller
list-view detail-view
controller controller
Dienstag, 11. Februar 14
#ourMobileHypingCodingEndavour
application controller
list-view detail-view
controller controller
Dienstag, 11. Februar 14
let‘s dive in
Dienstag, 11. Februar 14
WHAT‘S COVERED?
Dienstag, 11. Februar 14
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
