WITH YOUR
BARE 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 c...
github.com/marcbaechinger/barehands-workshop

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

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

# git clone https://github.com/marcbaechinger/barehands-workshop.git
# git c...
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
1st prio

learn about HTML, JavaScript and CSS

2nd prio

not about libraries or frameworks

Dienstag, 11. Februar 14
• modern

browser APIs

• fully-scalable

UIs with CSS3

• CSS3

transformations, animations and transitions

• some

basi...
80
lets start our 90-minutes journey
to native browser land

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

Dienstag, 11. Februar 14
MVC derivates

T‘S COVERED?
WHA

bubbling events

basic namespaces

function proxying

decoupled communication

CSS transf...
NG PIECES !!
MISSI

Dienstag, 11. Februar 14
NG PIECES !!
MISSI
client-side templating

(two-way) data-binding

observable model
testability
Dienstag, 11. Februar 14
a controller
pitch

Dienstag, 11. Februar 14
alibanism, though
axiomatic rules - no t
1

leverage event bubbling

3

controller

a controller ,controls‘ a
subtree of a...
ingEndavour
ileHypingCod
#ourMob
r
application controlle

controller

list-view

Dienstag, 11. Februar 14

controller

det...
ingEndavour
ileHypingCod
#ourMob
r
application controlle

controller

list-view

Dienstag, 11. Februar 14

controller

det...
let‘s dive in
Dienstag, 11. Februar 14
T‘S COVERED?
WHA

Dienstag, 11. Februar 14
MVC derivates

T‘S COVERED?
WHA

catch bubbling events

basic namespaces

function proxying

decoupled communication

CSS ...
Upcoming SlideShare
Loading in...5
×

With your bare hands

704
-1

Published on

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!

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
704
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

With your bare hands

  1. 1. WITH YOUR BARE HANDS @marcbaechinger Dienstag, 11. Februar 14
  2. 2. github.com/marcbaechinger/barehands-workshop Dienstag, 11. Februar 14
  3. 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. 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. 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. 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. 7. Dienstag, 11. Februar 14
  8. 8. Dienstag, 11. Februar 14
  9. 9. Dienstag, 11. Februar 14
  10. 10. Dienstag, 11. Februar 14
  11. 11. Dienstag, 11. Februar 14
  12. 12. learn about HTML, JavaScript and CSS Dienstag, 11. Februar 14
  13. 13. learn about HTML, JavaScript and CSS not about libraries or frameworks Dienstag, 11. Februar 14
  14. 14. 1st prio learn about HTML, JavaScript and CSS 2nd prio not about libraries or frameworks Dienstag, 11. Februar 14
  15. 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. 16. 80 lets start our 90-minutes journey to native browser land Dienstag, 11. Februar 14
  17. 17. T‘S COVERED? WHA Dienstag, 11. Februar 14
  18. 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. 19. NG PIECES !! MISSI Dienstag, 11. Februar 14
  20. 20. NG PIECES !! MISSI client-side templating (two-way) data-binding observable model testability Dienstag, 11. Februar 14
  21. 21. a controller pitch Dienstag, 11. Februar 14
  22. 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. 23. ingEndavour ileHypingCod #ourMob r application controlle controller list-view Dienstag, 11. Februar 14 controller detail-view
  24. 24. ingEndavour ileHypingCod #ourMob r application controlle controller list-view Dienstag, 11. Februar 14 controller detail-view
  25. 25. let‘s dive in Dienstag, 11. Februar 14
  26. 26. T‘S COVERED? WHA Dienstag, 11. Februar 14
  27. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×