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!

1. WITH YOUR
BARE HANDS
@marcbaechinger
Dienstag, 11. Februar 14

2. github.com/marcbaechinger/barehands-workshop
Dienstag, 11. Februar 14

3. 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

4. github.com/marcbaechinger/barehands-workshop
# git clone https://github.com/marcbaechinger/barehands-workshop.git
# git checkout ws-start-1
live-coding step-1
# git checkout ws-start-2
# git checkout ws-start-3
...
Dienstag, 11. Februar 14

5. github.com/marcbaechinger/barehands-workshop
# git clone https://github.com/marcbaechinger/barehands-workshop.git
# git checkout ws-start-1
live-coding step-1
# git checkout ws-start-2
live-coding step-2
# git checkout ws-start-3
...
Dienstag, 11. Februar 14

6. github.com/marcbaechinger/barehands-workshop
# git clone https://github.com/marcbaechinger/barehands-workshop.git
# git checkout ws-start-1
live-coding step-1
# git checkout ws-start-2
live-coding step-2
# git checkout ws-start-3
...
Dienstag, 11. Februar 14

7. Dienstag, 11. Februar 14

8. Dienstag, 11. Februar 14

9. Dienstag, 11. Februar 14

10. Dienstag, 11. Februar 14

11. Dienstag, 11. Februar 14

12. learn about HTML, JavaScript and CSS
Dienstag, 11. Februar 14

13. learn about HTML, JavaScript and CSS
not about libraries or frameworks
Dienstag, 11. Februar 14

14. 1st prio
learn about HTML, JavaScript and CSS
2nd prio
not about libraries or frameworks
Dienstag, 11. Februar 14

15. • modern
browser APIs
• fully-scalable
UIs with CSS3
• CSS3
transformations, animations and transitions
• some
basic patterns for UI hacking (say: software engineering)
• combined
• decent
Dienstag, 11. Februar 14
OO and functional JavaScript style
client-side build toolchain (asses, build, test)

16. 80
lets start our 90-minutes journey
to native browser land
Dienstag, 11. Februar 14

17. T‘S COVERED?
WHA
Dienstag, 11. Februar 14

18. MVC derivates
T‘S COVERED?
WHA
bubbling events
basic namespaces
function proxying
decoupled communication
CSS transformations
dataset and classList
separation of concerns
unobstrusive JS
basic component model
dependency injection
Observable
application controller
DSL-like configuration
CSS transitions
Dienstag, 11. Februar 14
mixins

19. NG PIECES !!
MISSI
Dienstag, 11. Februar 14

20. NG PIECES !!
MISSI
client-side templating
(two-way) data-binding
observable model
testability
Dienstag, 11. Februar 14

21. a controller
pitch
Dienstag, 11. Februar 14

22. alibanism, though
axiomatic rules - no t
1
leverage event bubbling
3
controller
a controller ,controls‘ a
subtree of a document
2
controller
decouple controllers
by event-communication
controller
controller
Dienstag, 11. Februar 14

23. ingEndavour
ileHypingCod
#ourMob
r
application controlle
controller
list-view
Dienstag, 11. Februar 14
controller
detail-view

24. ingEndavour
ileHypingCod
#ourMob
r
application controlle
controller
list-view
Dienstag, 11. Februar 14
controller
detail-view

25. let‘s dive in
Dienstag, 11. Februar 14

26. T‘S COVERED?
WHA
Dienstag, 11. Februar 14

27. MVC derivates
T‘S COVERED?
WHA
catch bubbling events
basic namespaces
function proxying
decoupled communication
CSS transformations
dataset and classList
separation of concerns
unobstrusive JS
basic component model
dependency injection
Observable
application controller
DSL-like configuration
CSS transitions
Dienstag, 11. Februar 14
mixins