Embed Size (px)
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.
Citation preview
(ACTUALLY, JUST ANGULARJS)
WILL IAM PAOLI • WEB DEV TEAM LEAD • ATLASS IAN • @wi l lyp
Incorporating JS Libraries into Magnolia
INTEGRATING TO MAGNOLIA
HOW TO CODE IN ANGULARJS
WHY WE LIKE ANGULARJS
WHAT WE DO NOW
Table of Contents
Interactive Marketing Team
Atlassian University
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
”
“
Atlassian University
Atlassian University
Atlassian University
Atlassian University
What is a JS Framework?
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
”
“
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
”
“
The Atlassian order form redesign
We realized we needed a JS Framework
-HIPSTER DEV
“ Have you tried Angular JS?
Just text by itself, for impact.
Two way data binding
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
”
“
Two-Way Data Binding
favPeople=['Boris', 'Bill', 'Monica', 'Samuel'];
Two-Way Data Binding
Two way data binding
favPeople=['Boris', 'Bill', 'Monica', 'Samuel'];
<ul> <li>Boris</li> <li>Bill</li> <li>Monica</li> <li>Samuel</li></ul>
Two way data binding
favPeople=['Boris', 'Bill', 'Monica'];
<ul> <li>Boris</li> <li>Bill</li> <li>Monica</li> </ul>
Two way data binding
favPeople=['Boris', 'Bill', 'Monica', 'Samuel'];
<ul> <li>Boris</li> <li>Bill</li> <li>Monica</li> <li>Samuel</li></ul>
What/Who is AngularJS?
AngularJS is an open-source JavaScript framework, started in 2010, now maintained by Google.
AngularJS with Magnolia is fun
...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
NOW FOR SOME LIVE CODING!code found here:
https://bitbucket.org/willyp/angularjs-magnolia-basics/
How to get this into Magnolia
• 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™
Create new freemarker template and define the paragraphs
Define paragraph with new template
Define new dialogs for the
questions/answers
Create your content editing area
Create your JSON data with freemarker
Create your JSON data with freemarker
Now I add it to my layout template
Lets go back to the browser and pray this works!
WILL IAM PAOLI • WEB DEV TEAM LEAD • ATLASS IAN • @wi l lyp
THANK YOU!
