with your bare hands
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!TRANSCRIPT
![Page 1: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/1.jpg)
WITH YOURBARE HANDS
@marcbaechinger
Dienstag, 11. Februar 14
![Page 2: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/2.jpg)
github.com/marcbaechinger/barehands-workshop
Dienstag, 11. Februar 14
![Page 3: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/3.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/4.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/5.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/6.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/7.jpg)
Dienstag, 11. Februar 14
![Page 8: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/8.jpg)
Dienstag, 11. Februar 14
![Page 9: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/9.jpg)
Dienstag, 11. Februar 14
![Page 10: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/10.jpg)
Dienstag, 11. Februar 14
![Page 11: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/11.jpg)
Dienstag, 11. Februar 14
![Page 12: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/12.jpg)
learn about HTML, JavaScript and CSS
Dienstag, 11. Februar 14
![Page 13: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/13.jpg)
learn about HTML, JavaScript and CSS
not about libraries or frameworks
Dienstag, 11. Februar 14
![Page 14: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/14.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/15.jpg)
•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](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/16.jpg)
lets start our 90-minutes journeyto native browser land
80
Dienstag, 11. Februar 14
![Page 17: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/17.jpg)
WHAT‘S COVERED?
Dienstag, 11. Februar 14
![Page 18: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/18.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/19.jpg)
MISSING PIECES !!
Dienstag, 11. Februar 14
![Page 20: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/20.jpg)
MISSING PIECES !!
observable model
client-side templating (two-way) data-binding
testability
Dienstag, 11. Februar 14
![Page 21: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/21.jpg)
pitch a controller
Dienstag, 11. Februar 14
![Page 22: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/22.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/23.jpg)
#ourMobileHypingCodingEndavour
application controller
list-view detail-view
controller controller
Dienstag, 11. Februar 14
![Page 24: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/24.jpg)
#ourMobileHypingCodingEndavour
application controller
list-view detail-view
controller controller
Dienstag, 11. Februar 14
![Page 25: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/25.jpg)
let‘s dive in
Dienstag, 11. Februar 14
![Page 26: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/26.jpg)
WHAT‘S COVERED?
Dienstag, 11. Februar 14
![Page 27: With your bare hands](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/27.jpg)
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