1. Front-End
Modular & Automated
Development
/ josephj /
http://josephj.com / josephj6802@gmail.com

2. D-Link
D-Link

3. D-Link
...

4. D-Link

5. Software Engineer Project Manager
Service Engineer System Architect DBA
Front-end Engineer QA Engineer QA Tester
System Analyzer Operation Engineer
(Y!) 没
够

6. HTML/CSS/JavaScript
(

7. Azure Firmware
Flash
I18N/L10N PEAR
CMS Apache Module Hardware
Android Win32 Objective C
Embedded System
Server-side Script

8. •
HTML, CSS, JavaScript
•
Nicholas Zakas, “Make it difficult to make
mistakes.“

9. DIV
Modular Development

10. Modular Development
DIV
HTML CSS JS

12. _photo_filter.php
_photo_filter.css
_photo_filter.js
_photo_view.php
_photo_view.css
_photo_view.js
_photo_list.php
_photo_list.css
_photo_list.js

13. HTML -
HTML

14. CSS -
CSS

15. JavaScript -
JavaScript

16. • HTML include
• CSS : ID Selector CSS
30
30 Request
• JavaScript : CSS

17. Request

18. static.php - JS/CSS
key -
is_top: </head> </body>
is_noscript, media

19. static.php CSS/JS
Request
10 CSS Request
19 JavaScript Request

20. Mini Tool
缩
CSS/JS
http://www.flickr.com/photos/prettypony/2644225789/

21. Mini XML
$DEV_ROOT Apache VirtualHost
Mini module CSS JS
module module exclude
index CSS/JS

22. 经过 Mini 压缩
/mini?module=<Mini module>&type=<css|js>

23. 内
&nominify

24. static.php
29 Request

25. Request Orz...

26. static.php...
29 Request
2 Request

27. Request

28. Mini CSS/
JavaScript

29. Mini
Statif File Web Server PHP
CSS/JS Deploy
s
* md5_file() stamping
减 CDN

31. JavaScript
JavaScript
Function Object
mod A mod B
mod C

33. window.mods[“photo-show”] = {
showPhoto : function (src) {
....
}
}
window.mods[“photo-list”] = {
init : function () {
...
$(“img”).on(“click”, function(e) {
window.mods[“photo-show”].showPhoto(this.src);
}
没
} Bug!

34. ( )
( ) ( )
http://www.flickr.com/photos/vincentteeuwen/2816245519/

35. ( )
( )
http://www.flickr.com/photos/acaben/2477822120/

36. Nicholas Zakas

37. JavaScript
http://www.slideshare.net/nzakas/scalable-javascript-application-architecture

38. Loose Coupling
http://www.thesoftwaredevotional.com/images/coupling_train.jpg
组
组

39. Broadcast & Listen
Hub

41. Module -
Static
Instance Instance Instance
Module Module Module
Static Static Static
•
•

42. Core -
Core
Static
Static Class
Module Module Module
Static Static Static
• (register)
• (start, stop)
• (match)

43. Sandbox - API
Core
Static
match(caller, object)
Sandbox Sandbox Sandbox
Instance Instance Instance
listen(“need-love”) broadcast(“need-love”, object)
Module Module Module
Static Static Static
• Instance
• Core Sandbox
• Sandbox
• broadcast listen

44. _photo_list.js
Y.Core.register("photo-list", {
//
init: function (api) {
//
api.listen("photo-filter-submit");
api.listen("photo-filter-response");
this.api = api;
},
// ContentReady
onviewload: function () {
// Core
this.api.broadcast("photo-list-rendered", img.src);
},
//
onmessage: function (eventType, callerName, data) {
switch (eventType) {
case "photo-filter-response" :
this._updateUI() //
break;
`
case "photo-filter-submit" :
//
break;
}
},
_updateUI: function (data) {
// 诉 Core
this.api.broadcast("photo-list-rendered", img.src);
}
});

45. Demo
http://josephj.com/project/javascript-platform-yui-demo

46. Keep Going
Extension
API Method
Language Extension

47. YUI Intl JS

48. 3. api.listen(“lang-change”)
api.getTrans(<key>) ;
1. api.setLang(“jp-JP”);
2.
api.broadcast(“lang-change”)
YUI Intl JS

49. PHP JavaScript Language Key
<?php
$trans = get_trans(“lang-show_title”, “Focus Figure”, tokens);
?>
<script>
var trans =
api.getTrans(
“lang-show_message”,
“Nice to see you, I am Tofu flower girl”,
tokens);
</script>

50. API
( )
Unit Test

51. Make it difficult to make mistakes

53. j os ephj
http://www.flickr.com/photos/eye1/3184963395/
by Ivan Mlinaric

54. Guidelines

56. As a team

58. ...

59. Winchester House
http://www.crockford.com/codecamp/quality.ppt

60. Guideline
Guideline

61. Guideline
...

62. Code Review
没
...

63. 0 1

64. 0 1

65. 1. Commit/Push
Commit/Push Hook
• JSLint :
JavaScript Good Parts
• PHP CodeSniffer :
Code Convention PHP JavaScript CSS
• OptImg
Commit !

66. document.write
can be form of eval
JSLint

67. .rule {
attr: value;
}
PHP CodeSniffer (a.k.a phpcs)

68. Visual Designer
PSD
F2E
PNG8 Web
Fireworks
Alpha Transparency ( )

69. Photoshop PSD

70. Firework

71. 没

72. OptImg:
46%
Image Optimization

73. 给 Commit

74. 1. Commit/Push
Guideline

75. 2. Packaging
...
F2E Maintenance
Performance Security
(Packaging)

76. 2. Packaging
• JS/CSS
miii_index_d38eba51136ed0bf6d159770853b393b.css
CSS
• Static
CSS
• CSS DataURI/MHTML
CSS Sprites

77. pkg_create
JS/CSS
Mini
pkg_deploy
pkg_create & pkg_deploy

78. 2. Packaging
CSS/JS
CSS Sprites
DataURI/MHTML

80. Review
•
Performance
•

81. • JavaScript Module Platform @ GitHub
http://github.com/josephj/javascript-platform-yui
• Online Demo
http://josephj.com/project/javascript-platform-yui-demo
• Demo Source @ GitHub
http://github.com/josephj/javascript-plaform-yui-demo

82. Finally...

83. Thank You
so muchiii
Any Questions?
josephj6802@gmail.com
http://www.flickr.com/photos/phploveme/2847931240/