Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

970 views

Published on

Published in: Technology
  • Be the first to comment

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

×