incorporating javascript libraries into magnolia
DESCRIPTION
This presentation was given at Amplify Miami 2014 by William Paoli, Web Developer Team Lead at Atlassian. Adding AngularJS, for example, to the CMS makes for a beautiful customer experience. The presentation layer could never look so interesting without enhanced interactions provided by javascript. But how to take advantage of the power a javascript MVC framework when integrated with the power of Magnolia CMS? This presentation will illustrate how Atlassian is employing this technique to deliver highly engaging training modules through Atlassian University.TRANSCRIPT
![Page 1: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/1.jpg)
![Page 2: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/2.jpg)
(ACTUALLY, JUST ANGULARJS)
WILL IAM PAOLI • WEB DEV TEAM LEAD • ATLASS IAN • @wi l lyp
Incorporating JS Libraries into Magnolia
![Page 3: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/3.jpg)
INTEGRATING TO MAGNOLIA
HOW TO CODE IN ANGULARJS
WHY WE LIKE ANGULARJS
WHAT WE DO NOW
Table of Contents
![Page 4: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/4.jpg)
Interactive Marketing Team
![Page 5: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/5.jpg)
Atlassian University
![Page 6: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/6.jpg)
Atlassian University is a training tool that teaches your company how to use Atlassian’s products through videos and step-by-step interactive tutorials. It’s the fastest path to becoming a master of Atlassian tools.
-ATLASS IAN’S WEBS ITE
”
“
![Page 7: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/7.jpg)
Atlassian University
![Page 8: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/8.jpg)
Atlassian University
![Page 9: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/9.jpg)
Atlassian University
![Page 10: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/10.jpg)
Atlassian University
![Page 11: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/11.jpg)
What is a JS Framework?
![Page 12: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/12.jpg)
A JavaScript framework is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies.
-WIKIPEDIA
”
“
![Page 13: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/13.jpg)
A JavaScript framework is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies.
-WIKIPEDIA
”
“
![Page 14: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/14.jpg)
The Atlassian order form redesign
![Page 15: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/15.jpg)
![Page 16: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/16.jpg)
We realized we needed a JS Framework
![Page 17: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/17.jpg)
![Page 18: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/18.jpg)
![Page 19: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/19.jpg)
-HIPSTER DEV
“ Have you tried Angular JS?
![Page 20: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/20.jpg)
![Page 21: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/21.jpg)
Just text by itself, for impact.
![Page 22: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/22.jpg)
Two way data binding
![Page 23: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/23.jpg)
Data-binding in Angular web apps is the automatic synchronization of data between the model and view components. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.
-ANGULARJS DOCS - ht tp ://docs .angular js .org/guide/datab inding
”
“
![Page 24: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/24.jpg)
Two-Way Data Binding
![Page 25: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/25.jpg)
favPeople=['Boris', 'Bill', 'Monica', 'Samuel'];
Two-Way Data Binding
![Page 26: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/26.jpg)
Two way data binding
favPeople=['Boris', 'Bill', 'Monica', 'Samuel'];
<ul> <li>Boris</li> <li>Bill</li> <li>Monica</li> <li>Samuel</li></ul>
![Page 27: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/27.jpg)
Two way data binding
favPeople=['Boris', 'Bill', 'Monica'];
<ul> <li>Boris</li> <li>Bill</li> <li>Monica</li> </ul>
![Page 28: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/28.jpg)
Two way data binding
favPeople=['Boris', 'Bill', 'Monica', 'Samuel'];
<ul> <li>Boris</li> <li>Bill</li> <li>Monica</li> <li>Samuel</li></ul>
![Page 29: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/29.jpg)
![Page 30: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/30.jpg)
What/Who is AngularJS?
![Page 31: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/31.jpg)
AngularJS is an open-source JavaScript framework, started in 2010, now maintained by Google.
![Page 32: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/32.jpg)
AngularJS with Magnolia is fun
![Page 33: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/33.jpg)
...Magnolia proved once again to be an exceptionally flexible CMS and in combination with its REST API making this proof of concept was indeed extremely easy, fast and fun..
-FEDERICO GRILL I - SOFTWARE DEV @ MAGNOLIA , on h is b log
”
“
http://igorstravinskij.blogspot.com/2014/01/magnolia-rest-and-angularjs-proof-of.html
![Page 34: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/34.jpg)
NOW FOR SOME LIVE CODING!code found here:
https://bitbucket.org/willyp/angularjs-magnolia-basics/
![Page 35: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/35.jpg)
How to get this into Magnolia
![Page 36: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/36.jpg)
• Change your .html file to a .ftl
• Create paragraph and dialog definitions for:
• A question
• A answer
• Create an editing table
• Build your json structure based on that template*
• Insert quiz paragraph as an option to your layout
Steps to Magnoliafy™
![Page 37: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/37.jpg)
Create new freemarker template and define the paragraphs
![Page 38: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/38.jpg)
Define paragraph with new template
![Page 39: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/39.jpg)
Define new dialogs for the
questions/answers
![Page 40: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/40.jpg)
Create your content editing area
![Page 41: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/41.jpg)
![Page 42: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/42.jpg)
Create your JSON data with freemarker
![Page 43: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/43.jpg)
Create your JSON data with freemarker
![Page 44: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/44.jpg)
Now I add it to my layout template
![Page 45: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/45.jpg)
Lets go back to the browser and pray this works!
![Page 46: Incorporating Javascript Libraries into Magnolia](https://reader034.vdocuments.site/reader034/viewer/2022042607/554f50e3b4c905524c8b4e64/html5/thumbnails/46.jpg)
WILL IAM PAOLI • WEB DEV TEAM LEAD • ATLASS IAN • @wi l lyp
THANK YOU!