1. Lithe.js and Module Development

2. About me
Weibo:
http://weibo.com/designsor
Github:
https://github.com/xiaojue
Twitter:
https://twitter.com/xiao_jue
Blog:
http://www.tuer.me/user/profile/designsor
Email:
fuqiang3@staff.sina.com.cn

3. Module Development ？
•
•
•
•
•
•
What's it?
Why use it?
Advantages.
Drawbacks.
Existing standards.
Evolutionary history.

4. Module in javascript.
• Reuse and abstraction.
• Include.
• Management.
•
•
•
•
Dojo,Yui (loader class).
Commonjs.
Modules/AsynchronousDefinition.
Modules/Wrappings

5. Code part
https://gist.github.com/xiaojue/6972631 (some loader solutions)
http://wiki.commonjs.org/wiki/Modules/1.1.1
http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition
http://wiki.commonjs.org/wiki/Modules/Wrappings

6. Lithe.js ?
• What's it?
• Origin.
• Version.

7. Lithe
• A browser-side script loader,compatible
with the de facto
standards(NodeJS/CommonJS). It's very
simple and small,only 2.7kb gzipped.
• https://github.com/xiaojue/lithe
http://wiki.commonjs.org/wiki/Implementati
ons/lithe

8. Origin
https://gist.github.com/xiaojue/6972903 (bad amdjs)
https://github.com/spmjs/spm/wiki/_pages (why not seajs & spm)

9. Versions

10. User Guide
•
•
•
•
•
How to run it.
Standard.
Configuration.
Debugging.
Deploy.
• Technique nodus

11. Code Part
<script src="lithe.js"
data-config="config.js"
data-path="http://domain.com/"
data-debug="true"
data-main="app.js">
</script>
• So easy!!

12. Code Part
•
•
•
•
Define
Require
Use
Config
Node api
• https://github.com/xiaojue/lithe/blob/master/README.md

13. Code Part
•
(function(global,undef){
•
var isBrowser = !! (typeof window !== undef && global.navigator &&
global.document);
•
var debug = isBrowser ? (/debug/).test(location.search) : null;
•
var mod = {
•
alias:{},
•
basepath: debug ? 'path/src/' : 'path/dist'
– };
– If (global.define && isBrowser) {
• define('config',function(){
• return mod;
• });
– }else{
• module.exports = mod;
– }
•
})(this);

14. How to deploy?
https://github.com/xiaojue/grunt-lithe (use gruntjs)
https://github.com/xiaojue/lithe/blob/master/example.js
node native)
Lithe.tool
Lithe.hfs
FindJsAllrequires
ConcatFile
UglifyJs
Walk
… ….
(use

15. Technique nodus
• 1.Multi-module in one file.
• 2.Circular dependencies.
• https://github.com/xiaojue/lithe/blob/master/src/module.js
• 3.Online debuging.
•
Source map? Debug config?

16. Future
• 1.plugns.
• 2.combine url support.
• … ...

17. Practice
• Sina blog for mobile version (iphone and ipad).
• Voluminous Weibo (Beta).
• Some others.

18. Mobile Blog
http://liangdong.sinaapp.com/share/my/mobileblog/mobileblog.html#/4

19. Voluminous weibo

20. UML

21. UML

22. http://www.slideshare.net/xiaojueqq12345/lithe