With your bare hands
-
Upload
marc-baechinger -
Category
Technology
-
view
657 -
download
0
description
Transcript of With your bare hands
![Page 1: With your bare hands](https://reader034.fdocuments.us/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/1.jpg)
WITH YOURBARE HANDS
@marcbaechinger
Dienstag, 11. Februar 14
![Page 2: With your bare hands](https://reader034.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/7.jpg)
Dienstag, 11. Februar 14
![Page 8: With your bare hands](https://reader034.fdocuments.us/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/8.jpg)
Dienstag, 11. Februar 14
![Page 9: With your bare hands](https://reader034.fdocuments.us/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/9.jpg)
Dienstag, 11. Februar 14
![Page 10: With your bare hands](https://reader034.fdocuments.us/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/10.jpg)
Dienstag, 11. Februar 14
![Page 11: With your bare hands](https://reader034.fdocuments.us/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/11.jpg)
Dienstag, 11. Februar 14
![Page 12: With your bare hands](https://reader034.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/17.jpg)
WHAT‘S COVERED?
Dienstag, 11. Februar 14
![Page 18: With your bare hands](https://reader034.fdocuments.us/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.fdocuments.us/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/19.jpg)
MISSING PIECES !!
Dienstag, 11. Februar 14
![Page 20: With your bare hands](https://reader034.fdocuments.us/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.fdocuments.us/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/21.jpg)
pitch a controller
Dienstag, 11. Februar 14
![Page 22: With your bare hands](https://reader034.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/25.jpg)
let‘s dive in
Dienstag, 11. Februar 14
![Page 26: With your bare hands](https://reader034.fdocuments.us/reader034/viewer/2022052618/554a562cb4c905522f8b4c38/html5/thumbnails/26.jpg)
WHAT‘S COVERED?
Dienstag, 11. Februar 14
![Page 27: With your bare hands](https://reader034.fdocuments.us/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