Lithe.js and Module Development
About me

Weibo:
http://weibo.com/designsor
Github:
https://github.com/xiaojue
Twitter:
https://twitter.com/xiao_jue
Blog:...
Module Development ?
•
•
•
•
•
•

What's it?
Why use it?
Advantages.
Drawbacks.
Existing standards.
Evolutionary history.
Module in javascript.
• Reuse and abstraction.
• Include.
• Management.
•
•
•
•

Dojo,Yui (loader class).
Commonjs.
Module...
Code part
https://gist.github.com/xiaojue/6972631 (some loader solutions)
http://wiki.commonjs.org/wiki/Modules/1.1.1
http...
Lithe.js ?
• What's it?
• Origin.
• Version.
Lithe
• A browser-side script loader,compatible
with the de facto
standards(NodeJS/CommonJS). It's very
simple and small,o...
Origin

https://gist.github.com/xiaojue/6972903 (bad amdjs)
https://github.com/spmjs/spm/wiki/_pages (why not seajs & spm)
Versions
User Guide
•
•
•
•
•

How to run it.
Standard.
Configuration.
Debugging.
Deploy.

• Technique nodus
Code Part
<script src="lithe.js"
data-config="config.js"
data-path="http://domain.com/"
data-debug="true"
data-main="app.j...
Code Part
•
•
•
•

Define
Require
Use
Config
Node api

• https://github.com/xiaojue/lithe/blob/master/README.md
Code Part
•

(function(global,undef){

•

var isBrowser = !! (typeof window !== undef && global.navigator &&
global.docume...
How to deploy?
https://github.com/xiaojue/grunt-lithe (use gruntjs)
https://github.com/xiaojue/lithe/blob/master/example.j...
Technique nodus
• 1.Multi-module in one file.
• 2.Circular dependencies.
• https://github.com/xiaojue/lithe/blob/master/sr...
Future
• 1.plugns.
• 2.combine url support.
• … ...
Practice
• Sina blog for mobile version (iphone and ipad).
• Voluminous Weibo (Beta).
• Some others.
Mobile Blog

http://liangdong.sinaapp.com/share/my/mobileblog/mobileblog.html#/4
Voluminous weibo
UML
UML
http://www.slideshare.net/xiaojueqq12345/lithe
Lithe
Upcoming SlideShare
Loading in …5
×

Lithe

306 views
250 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
306
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • {}
  • Lithe

    1. 1. Lithe.js and Module Development
    2. 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. 3. Module Development ? • • • • • • What's it? Why use it? Advantages. Drawbacks. Existing standards. Evolutionary history.
    4. 4. Module in javascript. • Reuse and abstraction. • Include. • Management. • • • • Dojo,Yui (loader class). Commonjs. Modules/AsynchronousDefinition. Modules/Wrappings
    5. 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. 6. Lithe.js ? • What's it? • Origin. • Version.
    7. 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. 8. Origin https://gist.github.com/xiaojue/6972903 (bad amdjs) https://github.com/spmjs/spm/wiki/_pages (why not seajs & spm)
    9. 9. Versions
    10. 10. User Guide • • • • • How to run it. Standard. Configuration. Debugging. Deploy. • Technique nodus
    11. 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. 12. Code Part • • • • Define Require Use Config Node api • https://github.com/xiaojue/lithe/blob/master/README.md
    13. 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. 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. 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. 16. Future • 1.plugns. • 2.combine url support. • … ...
    17. 17. Practice • Sina blog for mobile version (iphone and ipad). • Voluminous Weibo (Beta). • Some others.
    18. 18. Mobile Blog http://liangdong.sinaapp.com/share/my/mobileblog/mobileblog.html#/4
    19. 19. Voluminous weibo
    20. 20. UML
    21. 21. UML
    22. 22. http://www.slideshare.net/xiaojueqq12345/lithe

    ×