Patterns: The new Javascript framweork

917 views

Published on

An introduction of the new Javascript framework that is going to be shipping with Plone 5.0+

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

No Downloads
Views
Total views
917
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Patterns: The new Javascript framweork

  1. 1. Patterns: The new Javascript framework Franco Pellegrini @frapell PloneConf 2013 – Brasilia, Brazil
  2. 2. Current status ● Developing as if it were 2004 ● 41 Javascript files registered on a fresh Plone 4.3.2 ● 7 Disabled ● Resource Registry
  3. 3. Current status
  4. 4. Current status ● New releases of Javascript technologies require a new release of the plone product that integrates it. ● As what happened with skinning before Diazo, you cannot do Javascript in Plone if you're not a Plone developer. ( Not *that* bad as it was with skinning, but still... ) ● Developing as if it were 2004 ● 41 Javascript files registered on a fresh Plone 4.3.2 ● 7 Disabled ● Resource Registry
  5. 5. Current status ● You can easily mess JS order, compression, etc in Resource Registry
  6. 6. ●NO TESTS Current status
  7. 7. Let's change the approach ● Javascript is not just a script language to make minor modifications to a web page. ● People are building powerful applications. ● Node.js, AngularJS, EmberJS, Batman.JS, etc. ● Require.js, almond.js, Closure, UglifyJS, etc. ● Reuse and not reinvent.
  8. 8. Say hi to Plone Mockup ● No buildout for front-end devs. ● Provide Javascript code already compiled, compressed, mangled, etc ● No Python packages ● Friendly for Javascript developers
  9. 9. Using existing tools YEOMAN ● YO – Used to create the basic skeleton for Javascript applications. Equivalent to paster. ● GRUNT – Used to build, preview and test, through tasks. ● BOWER – Package manager.
  10. 10. Using existing tools PATTERNSLIB ● Javascript library ● Fast prototyping ● Introduces the concept of a “Pattern” ● Mockup just uses the registry
  11. 11. Using existing tools KARMA-MOCHA ● Karma Plugin for use with Mocha ● Karma is a test runner ● Mocha a test framework ● Chai the assertion library
  12. 12. A Pattern
  13. 13. A Bundle
  14. 14. Practical example
  15. 15. Practical example
  16. 16. Don't forget to test
  17. 17. generator-plonemockup ● Depends on YEOMAN $ npm install -g generator-plonemockup $ yo plonemockup ● After answering a few questions, you should end up with - bower.json - config.js - Gruntfile.js - js | - bundles | | - widgets.js | - patterns | - my-pattern.js - package.json
  18. 18. generator-plonemockup ● If it didn't throw any error, a new 'build' folder should be there. ● This is the Javascript you need to include in your projects $ grunt
  19. 19. How your reaction should be...
  20. 20. How your reaction should be...
  21. 21. Resources ● https://github.com/plone/mockup ● https://github.com/plone/plone.app.widgets
  22. 22. Thank you !

×