patterns: the new javascript framweork
DESCRIPTION
An introduction of the new Javascript framework that is going to be shipping with Plone 5.0+TRANSCRIPT
Patterns: The new Javascript framework
Franco Pellegrini@frapell
PloneConf 2013 – Brasilia, Brazil
Current status
● Developing as if it were 2004
● 41 Javascript files registered on a fresh Plone 4.3.2
● 7 Disabled
● Resource Registry
Current status
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
Current status
● You can easily mess JS order, compression, etc in Resource Registry
●NO TESTS
Current status
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.
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
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.
Using existing tools
PATTERNSLIB
● Javascript library
● Fast prototyping
● Introduces the concept of a “Pattern”
● Mockup just uses the registry
Using existing tools
KARMA-MOCHA
● Karma Plugin for use with Mocha
● Karma is a test runner
● Mocha a test framework
● Chai the assertion library
A Pattern
A Bundle
Practical example
Practical example
Don't forget to test
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
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
How your reaction should be...
How your reaction should be...
Resources
● https://github.com/plone/mockup
● https://github.com/plone/plone.app.widgets
Thank you !