Patterns: The new Javascript framweork
-
Upload
franco-pellegrini -
Category
Technology
-
view
481 -
download
3
description
Transcript of Patterns: The new Javascript framweork
![Page 1: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/1.jpg)
Patterns: The new Javascript framework
Franco Pellegrini@frapell
PloneConf 2013 – Brasilia, Brazil
![Page 2: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/2.jpg)
Current status
● Developing as if it were 2004
● 41 Javascript files registered on a fresh Plone 4.3.2
● 7 Disabled
● Resource Registry
![Page 3: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/3.jpg)
Current status
![Page 4: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/4.jpg)
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
![Page 5: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/5.jpg)
Current status
● You can easily mess JS order, compression, etc in Resource Registry
![Page 6: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/6.jpg)
●NO TESTS
Current status
![Page 7: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/7.jpg)
![Page 8: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/8.jpg)
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.
![Page 9: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/9.jpg)
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
![Page 10: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/10.jpg)
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.
![Page 11: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/11.jpg)
Using existing tools
PATTERNSLIB
● Javascript library
● Fast prototyping
● Introduces the concept of a “Pattern”
● Mockup just uses the registry
![Page 12: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/12.jpg)
Using existing tools
KARMA-MOCHA
● Karma Plugin for use with Mocha
● Karma is a test runner
● Mocha a test framework
● Chai the assertion library
![Page 13: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/13.jpg)
A Pattern
![Page 14: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/14.jpg)
A Bundle
![Page 15: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/15.jpg)
Practical example
![Page 16: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/16.jpg)
Practical example
![Page 17: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/17.jpg)
Don't forget to test
![Page 18: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/18.jpg)
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
![Page 19: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/19.jpg)
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
![Page 20: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/20.jpg)
How your reaction should be...
![Page 21: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/21.jpg)
How your reaction should be...
![Page 22: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/22.jpg)
Resources
● https://github.com/plone/mockup
● https://github.com/plone/plone.app.widgets
![Page 23: Patterns: The new Javascript framweork](https://reader034.fdocuments.us/reader034/viewer/2022052522/554f60a6b4c905bb178b46e0/html5/thumbnails/23.jpg)
Thank you !