The Architect Way - JSCamp.asia 2012
-
Upload
jan-jongboom -
Category
Documents
-
view
3.393 -
download
2
Transcript of The Architect Way - JSCamp.asia 2012
![Page 1: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/1.jpg)
WAY
ARCHITECTTHE
Jan JongboomJSCamp.asia
November 30, 2012, Singapore
![Page 2: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/2.jpg)
@janjongboom
![Page 3: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/3.jpg)
Program
• Cloud9? 5 minute intro + what's new
• Problems growing your codebase
• Introducing: Architect!
• Lessons learned
![Page 4: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/4.jpg)
Normal developers
![Page 5: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/5.jpg)
JavaScript Developer
![Page 6: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/6.jpg)
OPPA CLOUD9 STYLE
![Page 7: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/7.jpg)
![Page 8: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/8.jpg)
![Page 9: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/9.jpg)
Smart code completion
![Page 10: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/10.jpg)
Static analysis
![Page 11: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/11.jpg)
Free Linux machine
![Page 12: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/12.jpg)
Real terminal
![Page 13: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/13.jpg)
Program
• Cloud9? 5 minute intro + what's new
• Problems growing your codebase
• Introducing: Architect!
• Lessons learned
![Page 14: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/14.jpg)
Hundreds of thousands of lines of JavaScript
(with semicolons ;-))
![Page 15: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/15.jpg)
dynamicweakly-typedlanguage
![Page 16: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/16.jpg)
one single thread
![Page 17: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/17.jpg)
![Page 18: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/18.jpg)
Modularization
![Page 19: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/19.jpg)
Black box coding
![Page 20: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/20.jpg)
![Page 21: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/21.jpg)
Great at abstracting away
![Page 22: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/22.jpg)
Not that good at app level abstraction
![Page 23: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/23.jpg)
Relies on filesystem
• Duplicated modules
• Maps to folder / file name
• Hard to configure
![Page 24: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/24.jpg)
coding time startup time run time
KA-BO
OM!
- Server crash- Unhappy customers- Developer gets fired
Dependency error handling
![Page 25: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/25.jpg)
Program
• Cloud9? 5 minute intro + what's new
• Problems growing your codebase
• Introducing: Architect!
• Lessons learned
![Page 26: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/26.jpg)
Architect
• Every piece of functionality is a plugin
• Plugins can consume other plugins
• An application is a set of plugins
![Page 27: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/27.jpg)
Require
Architect
Runtime
Startup time
![Page 28: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/28.jpg)
Dependency error handlingArchitect style
coding time compile time run time
- Happy customers- Developer keeps job- Fails before release
![Page 29: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/29.jpg)
Here’s what we do
• Code representation of this talk
• Get a speaker from the database
• Talk, talk, talk
• And end with a dance
![Page 30: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/30.jpg)
![Page 31: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/31.jpg)
![Page 32: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/32.jpg)
![Page 33: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/33.jpg)
![Page 34: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/34.jpg)
![Page 35: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/35.jpg)
Group functions by behavior
![Page 36: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/36.jpg)
Datalayer
Presentation
![Page 37: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/37.jpg)
Datalayer Presentation
Dependency model
![Page 38: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/38.jpg)
package.json
Builds dependency tree
executing codewithout
![Page 39: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/39.jpg)
data-‐layer/package.json
presentation/package.json
![Page 40: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/40.jpg)
What’s next?
• Extract the code
• Wrap in Architect plugin code
• It’s simple!
• Make two plugins
![Page 41: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/41.jpg)
Function signature
Call when done
![Page 42: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/42.jpg)
Architect plugin code
• Options, will get to that
• Imports, everything you consume
• Register, invoke when done
![Page 43: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/43.jpg)
![Page 44: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/44.jpg)
![Page 45: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/45.jpg)
![Page 46: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/46.jpg)
Dependencies abstracted away
• Easily unit testable
• Mock dependencies
• Assert ‘talk’ function is called 5 times
![Page 47: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/47.jpg)
![Page 48: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/48.jpg)
![Page 49: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/49.jpg)
![Page 50: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/50.jpg)
![Page 51: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/51.jpg)
No black magic
• Architect builds dependency model
• Feed architect a list of plugins
• Simple array with file names
• Call ‘createApp’
![Page 52: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/52.jpg)
![Page 53: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/53.jpg)
![Page 54: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/54.jpg)
![Page 55: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/55.jpg)
Configuration
• Per-plugin options
• No global options object
• Specify in config file
![Page 56: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/56.jpg)
![Page 57: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/57.jpg)
![Page 58: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/58.jpg)
Options
• Automatically passed in at startup
• Options are also dependencies
• Fail if options aren’t present
• Use default assertions
![Page 59: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/59.jpg)
![Page 60: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/60.jpg)
![Page 61: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/61.jpg)
Architect makes you think of your app as
chunks of functionalityrather than sets of classes
![Page 62: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/62.jpg)
Think ‘chunks of functionality’
• Implicit type constraints
• Keep implementation private
• Swap feature implementations
• Rather than interface implementations
![Page 63: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/63.jpg)
How do we use it?
• Open source version
• Hosted version
• Normal
• FTP
• SSH
![Page 64: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/64.jpg)
![Page 65: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/65.jpg)
Swap feature per implementation
• On Open source: talk local filesystem
• On FTP: talk FTP library
• On SSH: log in and talk via a SSH bridge
![Page 66: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/66.jpg)
HERE’S SOMETHING COOL
![Page 67: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/67.jpg)
Centralized eventbus
• Loose coupling between plugins
• No hard dependencies!
• Can also do inter-context communication
![Page 68: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/68.jpg)
Eventbus
Plugin
Other plugin
Emit event
React on event
![Page 69: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/69.jpg)
![Page 70: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/70.jpg)
![Page 71: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/71.jpg)
And now scale up
• Need something inter-server
• Swap it with i.e. Redis PubSub
• Plugins will never notice
• Awesome!
![Page 72: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/72.jpg)
Program
• Cloud9? 5 minute intro + what's new
• Problems growing your codebase
• Introducing: Architect!
• Lessons learned
![Page 73: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/73.jpg)
Modularize in feature blocks
• Don’t over engineer
• Don’t create too small blocks
• They are no interfaces!
![Page 74: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/74.jpg)
Avoid context switching
• Less code!
• Less errors!
• Less boilerplate!
![Page 75: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/75.jpg)
Loose coupling
• Eventbus
• Smaller dependency graph
![Page 77: The Architect Way - JSCamp.asia 2012](https://reader034.fdocuments.net/reader034/viewer/2022051111/554bbb20b4c9053a298b4d1c/html5/thumbnails/77.jpg)
Happy coding!