Your SlideShare is downloading. ×
Speeding Up JS and CSS Download Times with Aggregation and Minification
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Speeding Up JS and CSS Download Times with Aggregation and Minification

2,263
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
2,263
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Speeding Up JS and CSS Download Timeswith Aggregation and MinificationAlex Soto BuenoComputer Engineer
    • 2. Origin of problem What is HTML 5
    • 3. Origin of ProblemHTML 5 = 3
    • 4. Origin of ProblemHTML 5 = HTML 3
    • 5. Origin of ProblemHTML 5 = HTML + CSS 3 3
    • 6. Origin of ProblemHTML 5 = HTML + CSS 3 + JS 3
    • 7. Origin of ProblemHTML 5 = HTML + CSS 3 + JS 3
    • 8. Origin of Problem1 HTML in 1994 4
    • 9. Origin of Problem1 HTML in 1994 4
    • 10. Origin of Problem 1 HTML1 HTML n CSS in n JS 1994 in 2011 4
    • 11. Origin of Problem 5
    • 12. Origin of Problem 5
    • 13. Origin of ProblemNow What ? 6
    • 14. Origin of ProblemNow What ? Good Design 6
    • 15. Origin of ProblemNow What ? Good Design Aggregation & Minification 6
    • 16. Aggregation & Minification Mini... what?
    • 17. Aggregation & MinificationWhy Multiple Files? 8
    • 18. Aggregation & MinificationWhy Multiple Files? Separation of Concerns 8
    • 19. Aggregation & MinificationWhy Multiple Files? Separation of Concerns One File To Rule Them All 8
    • 20. Aggregation & MinificationMini.... What? Free cholesterol 9
    • 21. First Approach What is wrong?
    • 22. First ApproachMinificators 11
    • 23. First ApproachMinificators 11
    • 24. First ApproachComparison 0 75,000.0 150,000.0 225,000.0 300,000.0 Packer 67255 Closure 82607 UglifyJS 92054 YUI 101990 Dojo 120615 JSMin 135349 Original 238158 12
    • 25. First Approach Joining 13
    • 26. First Approach Joining All in One Maven Plugin 13
    • 27. First ApproachGood but ... 14
    • 28. First ApproachGood but ... Duplicated Files 14
    • 29. First ApproachGood but ... Duplicated Files Rerun Plugin for ANY Modification 14
    • 30. JawrBest of Both Worlds
    • 31. JawrJawr Open Source Project Joins and Minifies at runtime 16
    • 32. JawrFor Aggregation Maps resources to bundles 17
    • 33. JawrFor MinificationBundle Post Processor 18
    • 34. JawrFor MinificationBundle Post Processor JSMin YUI Compressor Closure Compiler ... your own 18
    • 35. Example Hands on Work
    • 36. Example 20
    • 37. Example 20
    • 38. Example 20
    • 39. Example 20
    • 40. Example 20
    • 41. Example 20
    • 42. ExampleWeb Applications Based on Servlets <servlet> <servlet-name>JavascriptServlet</servlet-name> <servlet-class>net.jawr.web.servlet.JawrServlet</servlet-class> <!-- Location in classpath of the config file --> <init-param> <param-name>configLocation</param-name> <param-value>/jawr.properties</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>JavascriptServlet</servlet-name> <url-pattern>*.js</url-pattern> </servlet-mapping> 21
    • 43. ExampleWeb Applications Based on Spring MVC@Controllerpublic class JavascriptJawrController {! @Autowired! @Qualifier("jawrJsController")! private JawrSpringController jawrSpringController;! @RequestMapping(value="/**/*.js")! public ModelAndView jawrJavascript(HttpServletRequest request, HttpServletResponseresponse) throws Exception {! ! return this.jawrSpringController.handleRequest(request, response);! }} 22
    • 44. Exampleand Many More ... Wicket Facelets Grails DWR 23
    • 45. ExampleComparison 24
    • 46. ExampleComparison 24
    • 47. Conclusions I Need Them
    • 48. ConclusionsAggregation Reduces Connections 26
    • 49. ConclusionsAggregation Reduces ConnectionsMinification Reduces Download Time 26
    • 50. ConclusionsAggregation Reduces ConnectionsMinification Reduces Download TimeAt Runtime Better than Built-in time. 26
    • 51. ConclusionsAggregation Reduces ConnectionsMinification Reduces Download TimeAt Runtime Better than Built-in time.Mobile Users will Appreciate it 26
    • 52. ConclusionsAggregation Reduces ConnectionsMinification Reduces Download TimeAt Runtime Better than Built-in time.Mobile Users will Appreciate itBut your Bank Account Too 26
    • 53. Wait!!! Minified & GZip Minified 27
    • 54. Wait!!! Minified & GZip Minified200000.0150000.0100000.0 50000.0 0 Closure Packer UglifyJS YUI JSMin DOJO 27
    • 55. Wait!!! Minified & GZip Minified200000.0150000.0100000.0 50000.0 0 Closure Packer UglifyJS YUI JSMin DOJO 27
    • 56. Game Is Over 28
    • 57. Alex Soto Bueno asotobu@gmail.com alexsotob.blogspot.com @alexsotobImba wimbo, Wa upepo, Wakati unajiwa na (James Horner - Mighty Joe Young)