Incorporating Javascript Libraries into Magnolia

  • 227 views
Uploaded on

This presentation was given at Amplify Miami 2014 by William Paoli, Web Developer Team Lead at Atlassian. …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
227
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. (ACTUALLY, JUST ANGULARJS) WILLIAM PAOLI • WEB DEV TEAM LEAD • ATLASSIAN • @willyp Incorporating JS Libraries into Magnolia
  • 2. INTEGRATING TO MAGNOLIA HOW TO CODE IN ANGULARJS WHY WE LIKE ANGULARJS WHAT WE DO NOW Table of Contents
  • 3. Interactive Marketing Team
  • 4. Atlassian University
  • 5. 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. -ATLASSIAN’S WEBSITE ” “
  • 6. Atlassian University
  • 7. Atlassian University
  • 8. Atlassian University
  • 9. Atlassian University
  • 10. What is a JS Framework?
  • 11. 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 ” “
  • 12. 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 ” “
  • 13. The Atlassian order form redesign
  • 14. We realized we needed a JS Framework
  • 15. -HIPSTER DEV “ Have you tried Angular JS?
  • 16. Just text by itself, for impact.
  • 17. Two way data binding
  • 18. 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 - http://docs.angularjs.org/guide/databinding ” “
  • 19. Two-Way Data Binding
  • 20. favPeople=['Boris', 'Bill', 'Monica', 'Samuel']; Two-Way Data Binding
  • 21. Two way data binding favPeople=['Boris', 'Bill', 'Monica', 'Samuel']; <ul> <li>Boris</li> <li>Bill</li> <li>Monica</li> <li>Samuel</li> </ul>
  • 22. Two way data binding favPeople=['Boris', 'Bill', 'Monica']; <ul> <li>Boris</li> <li>Bill</li> <li>Monica</li> </ul>
  • 23. Two way data binding favPeople=['Boris', 'Bill', 'Monica', 'Samuel']; <ul> <li>Boris</li> <li>Bill</li> <li>Monica</li> <li>Samuel</li> </ul>
  • 24. What/Who is AngularJS?
  • 25. AngularJS is an open-source JavaScript framework, started in 2010, now maintained by Google.
  • 26. AngularJS with Magnolia is fun
  • 27. ...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 GRILLI - SOFTWARE DEV @ MAGNOLIA, on his blog ” “ http://igorstravinskij.blogspot.com/2014/01/ magnolia-rest-and-angularjs-proof-of.html
  • 28. NOW FOR SOME LIVE CODING! code found here: https://bitbucket.org/willyp/angularjs-magnolia-basics/
  • 29. How to get this into Magnolia
  • 30. • 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™
  • 31. Create new freemarker template and define the paragraphs
  • 32. Define paragraph with new template
  • 33. Define new dialogs for the questions/answers
  • 34. Create your content editing area
  • 35. Create your JSON data with freemarker
  • 36. Create your JSON data with freemarker
  • 37. Now I add it to my layout template
  • 38. Lets go back to the browser and pray this works!
  • 39. WILLIAM PAOLI • WEB DEV TEAM LEAD • ATLASSIAN • @willyp THANK YOU! wpaoli@atlassian.com