Tweet
Tweet

Slide 1

Slide 1 text

Geologic Time Scale Mark Wunsch @markwunsch

Slide 2

Slide 2 text

Deep Time

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Agenda • Stratigraphy • Asynchronous JavaScript + XML • Always Be Scrolling • Optimizing for Robots • Templates • Models, Views, Whatever • Prognostication

Slide 6

Slide 6 text

Stratigraphy

Slide 7

Slide 7 text

git log --reverse commit 0d55d7d Author: Michael Bryzek Date: Fri Jan 11 17:34:17 2008 -0500 Initial import from Subversion Principle of superposition

Slide 8

Slide 8 text

Principle of original horizontality

Slide 9

Slide 9 text

Principle of original horizontality

Slide 10

Slide 10 text

Principle of original horizontality

Slide 11

Slide 11 text

Principle of original horizontality

Slide 12

Slide 12 text

Principle of lateral continuity

Slide 13

Slide 13 text

Principle of lateral continuity

Slide 14

Slide 14 text

Principle of lateral continuity

Slide 15

Slide 15 text

Principle of lateral continuity

Slide 16

Slide 16 text

Ajax

Slide 17

Slide 17 text

XML-RPC ಠ_ಠ

Slide 18

Slide 18 text

GET /add-to-cart?sku=07734 ಠ_ಠ

Slide 19

Slide 19 text

ಠ_ಠ

Slide 20

Slide 20 text

HTTP/1.1 200 OK { “status”: 500, “msg”: “Internal server error”, ... } ಠ_ಠ

Slide 21

Slide 21 text

Maintainability

Slide 22

Slide 22 text

_.template()

Slide 23

Slide 23 text

window.history.pushState()

Slide 24

Slide 24 text

Infinite Scroll

Slide 25

Slide 25 text

←Previous 1 2 3 ... 10 Next →

Slide 26

Slide 26 text

$(window).on(‘scroll’) or window.setTimeout() or $ (window).on(‘scroll’, _.debounce(function.. and then window.history.pushState() or replaceState() and listen for window.onpopstate but you might want to store something in localStorage and then get HTML from the server but you’ll need innerShiv but that’s deprecated now so just use html5shiv.js or maybe the server returns JSON and you can put it in a Handlebars.js template and appendChild it’s starting to get really slow now and I think there’s a memory leak? Oh look, Paul Irish made something called jquery.infinitescroll.js I wonder if that’s any good...

Slide 27

Slide 27 text

$(window).on(‘scroll’) or window.setTimeout() or $ (window).on(‘scroll’, _.debounce(function.. and then window.history.pushState() or replaceState() and listen for window.onpopstate but you might want to store something in localStorage and then get HTML from the server but you’ll need innerShiv but that’s deprecated now so just use html5shiv.js or maybe the server returns JSON and you can put it in a Handlebars.js template and appendChild it’s starting to get really slow now and I think there’s a memory leak? Oh look, Paul Irish made something called jquery.infinitescroll.js I wonder if that’s any good... ಠ_ಠ http://tumbledry.org/2011/05/12/screw_hashbangs_building

Slide 28

Slide 28 text

Page 1 of 4ᴹNext →

Slide 29

Slide 29 text

Robots

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Whither single page apps?

Slide 32

Slide 32 text

Templates

Slide 33

Slide 33 text

${brandName}
${brandName}

Slide 34

Slide 34 text

${brandName}
${brandName}
ಠ_ಠ

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

https://github.com/mwunsch/handlebars.scala Sc

Slide 37

Slide 37 text

Backbone.js

Slide 38

Slide 38 text

Mark Wunsch @markwunsch MVC stands for Model View Computers. 9:21 AM - 22 Mar 13 9 RETWEETS 10 FAVORITES https://twitter.com/markwunsch/status/315090778651258882

Slide 39

Slide 39 text

Page 1 of 4ᴹNext →

Slide 40

Slide 40 text

Page 1 of 4ᴹNext → GET /products?page=2 Accept: application/json

Slide 41

Slide 41 text

But Can Backbone... - Give structure to web apps - Bring sanity to complex client-server calls - Effectively manage page state - Provide rich experiences without sacrificing SEO - Have a footprint small enough for mobile - Make my life just a little bit easier

Slide 42

Slide 42 text

But Can Backbone... ✓Give structure to web apps ✓Bring sanity to complex client-server calls ✓Effectively manage page state ✓Provide rich experiences without sacrificing SEO ✓Have a footprint small enough for mobile ✓Make my life just a little bit easier

Slide 43

Slide 43 text

But Can Backbone... ✓Give structure to web apps ✓Bring sanity to complex client-server calls ✓Effectively manage page state ✓Provide rich experiences without sacrificing SEO ✓Have a footprint small enough for mobile ✓Make my life just a little bit easier with work

Slide 44

Slide 44 text

Flexibility vs. Maintainability

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

The Future

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

http://sealedabstract.com/rants/why-mobile-web-apps-are-slow/

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

http://wunsch.spreadshirt.com/

Slide 53

Slide 53 text

Thanks

Slide 54

Slide 54 text

Appendix • http://hoppip.tumblr.com/post/26651017314/fantasiacosmos • http://flic.kr/p/dYKHj9 • http://commons.wikimedia.org/wiki/File:Poussin,_Nicolas_-_The_Empire_of_Flora_-_1631.jpg • http://commons.wikimedia.org/wiki/File:Profeta_Aggeo_(Moretto).jpg • http://commons.wikimedia.org/wiki/Category:The_Turk • http://commons.wikimedia.org/wiki/File:The_Caxton_Celebration_- _William_Caxton_showing_specimens_of_his_printing_to_King_Edward_IV_and_his_Queen.jp g • http://commons.wikimedia.org/wiki/File:Karl_Brullov_-_The_Last_Day_of_Pompeii_- _Google_Art_Project.jpg • http://commons.wikimedia.org/wiki/File:Eug%C3%A8ne_Ferdinand_Victor_Delacroix_006.jpg • http://2087.tumblr.com/post/56779361048 • http://commons.wikimedia.org/wiki/File:Sortie_de_l%27op%C3%A9ra_en_l %27an_2000-2.png