專題簡報2.pdf

Transcript

1. 自由軟體翻譯平台 組員：董孟鑫 9817123 賴廷彥 9917036 指導教授：楊武
2. Traditional web application
4. User Experience SUCKS HARD
5. Performance SUCKS HARD
6. Performance SUCKS HARD Unnecessary Data Re-transmission
7. we are building a TOOL
8. It has to be Handy
9. It has to be Handy Fast
10. It has to be Handy Fast Snappy
11. It has to be Handy Fast Snappy You meant SPA!
12. Single Page Application
13. everything in ONE single web page
14. how?
15. things servers are great at analytics HTML templating model behavior proxying UI events security data persisting routing users
16. things servers are great at analytics HTML templating model behavior proxying UI events security data persisting routing users
17. things browsers are great at HTML templating model behavior UI events routing users
18. Challenges
19. "Forward/Back buttons are broken"
20. # HASH comes to rescue
21. fragment identifier #
22. fragment identifier # browser history recognizes this
23. "Search Engine Optimization"
24. SEO?
25. SEO? GET A LIFE!
26. # HASH
27. # HASHBANG !
28. !come-and-crowl-me #
29. !come-and-crowl-me # Google recognizes this
30. "SPA can't be used for heavy lifting"
33. twitter's got HASHBANG, too
34. SPA looks good
35. SPA looks good coding time!
36. tl;dr
37. spaghetti code!
38. It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks
39. It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks
40. front-end needs a MVC framework
41. front-end needs a MVC framework
42. UI events routing HTML templating Model behavior
43. FACT: front-end needs a MVC framework for sure
45. M V C
46. Model View Collection
47. Model View Collection Router
48. Model data logic surrounding it sync with backend
49. Collection collection of Models
50. View the TRUE controller UI events no views : )
51. Router URL routing events back-end-controller-ish
52. Event model.bind 'change', → //do something collection.bind 'add', (model) → // ghrr
53. Sync newModel.save PUT oldModel.save POST collection.fetch GET model.destroy DELETE
54. Sync states with our RESTful back-end
55. read GET create POST update PUT delete DELETE /collection[/id] /collection /collection/id /collection/id
56. As the project grows bigger
57. <script src="scripts/lib/jquery-1.7.1.min.js"></script> <script src="scripts/lib/underscore-min.js"></script> <script src="scripts/lib/backbone-min.js"></script> <script src="socket.io/socket.io.js"></script> <script src="scripts/models/apple.js"></script> <script src="scripts/models/banana.js"></script> <script src="scripts/models/cat.js"></script> <script src="scripts/collections/apple.js"></script> <script src="scripts/collections/banana.js"></script> <script src="scripts/templates/sandvich.js"></script> <script src="scripts/views/apple.js"></script> <script src="scripts/views/banana.js"></script> …
58. dependency hell
59. we need a module loader
60. AMD comes to rescue
61. Asynchronous Module Definition
62. Asynchronous Module Definition a proposal of CommonJS Modules/Transport
63. Implementation: Require.js
64. require a module require ['lib/jquery'], ($) → $('...')
65. define a module define ['dependency'], (dep) → // do something return something
66. specify the entry point <script data-main="scripts/main" src="scripts/require.js"></script>
67. dependencies loaded asynchronously <script data-main="scripts/main" src="scripts/require.js"></script> <script ... ></script> <script ... ></script> <script ... ></script> <script ... ></script>
68. Modularized! scripts/ lib/ jquery... backbone... ... models/ ... Collections/ ... templates/ routers/ views/ main.js
69. other features optimization i18n bundle jsonp multiversion support …
70. How's our work then!?
71. We've just got our dev stack ready
72. Scripting DOM API MVC AMD Templating Stylesheets CoffeeScript jQuery Backbone.js Require.js Mustache + Hogan.js SASS/Compass
73. Q&A