sitecore en angularjs: hoe werken ze samen/media/sugnl/meetings/developer... · applications. it...
TRANSCRIPT
![Page 1: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/1.jpg)
©2016 Avanade Inc. All Rights Reserved.
Sitecore en AngularJS: hoe werken ze samen
Derk Hudepol
Consultant
11-02-2016
![Page 2: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/2.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
• Consultant bij Avanade
• Werkzaam bij Avanade voor bijna 6 jaar
• Werk 3+ jaar met Sitecore
• Meeste interessante Sitecore onderwerpen:• Experience Editor
• Services Client
• xDB
• Extending Sitecore
Wie ben ik?
Blog : http://hookedon.digital
![Page 3: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/3.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
• Microsoft technologie
• Joint venture van Accenture en Microsoft
• Global Platinum Sitecore partner
• 27000 medewerkers wereldwijd
• Top 1 ICT Nederland Employer
Wat is Avanade?
![Page 4: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/4.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
Divider
Subhead
©2016 Avanade Inc. All Rights Reserved.4
AngularJS
Wat is het?
©2016 Avanade Inc. All Rights Reserved.
![Page 5: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/5.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add titleAngularJS
AngularJS (commonly referred to as "Angular" or "Angular.js") is
an open-source web application framework mainly maintained
by Google and by a community of individuals and corporations to
address many of the challenges encountered in developing single-page
applications. It aims to simplify both the development and the testing of
such applications by providing a framework for client-side model–view–
controller (MVC) andmodel–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.
![Page 6: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/6.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
Divider
Subhead
©2016 Avanade Inc. All Rights Reserved.6
AngularJS en Sitecore
Hoe gebruik je het?
©2016 Avanade Inc. All Rights Reserved.
![Page 7: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/7.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
• Load times
• Moderne technieken
• Geen conflicten met Sitecore javascript
• Directives en controllers zijn goed te isoleren
• Caching
Waarom?
![Page 8: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/8.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add titleWelke vorm van implementatie?
Simpel Medium Full SPA
Enkel hide/show/binding etc. bijvoorbeeld popups met dynamische html, web api calls
![Page 9: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/9.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
• Sitecore
• AngularJS
• Asp.NET MVC
• Optioneel AngularJS Bootstrap
Wat heb je nodig?
![Page 10: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/10.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
• AngularJS
• AngularJS Bootstrap
• Bootstrap
• Sitecore 8.1
• Mvc DisplayModes plugin vanReinoud van Dalen
Wat is er gebruikt in demo’s?
![Page 11: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/11.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
• Eigenlijk is de techniek niet moeilijk
• Concepten
• Paar belangrijke punten..
Hoe moeilijk is het?
![Page 12: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/12.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
Divider
Subhead
©2016 Avanade Inc. All Rights Reserved.12
Simpele implementatie
Uitdagingen
©2016 Avanade Inc. All Rights Reserved.
![Page 13: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/13.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
Divider
Subhead
©2016 Avanade Inc. All Rights Reserved.13
Medium implementatie
Implementatie
©2016 Avanade Inc. All Rights Reserved.
![Page 14: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/14.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
• Dynamische Html in Experience Editor
• Alles altijd aanpasbaar
• Koppelingen leggen naar dynamische html
• Optioneel: Model vanuit Sitecore aanleveren
Uitdagingen
![Page 15: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/15.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
• Aanroep van window.top.Sitecore.PageModes.ChromeManager.resetChromes()
• Gebruik maken van Sitecore.PageModes.PageEditor javascriptobject
• AngularJS directives
• If..else… constructies
• Service API Controller
Oplossingen
![Page 16: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/16.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
• Demo van medium implementatie
Demo
![Page 17: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/17.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
Divider
Subhead
©2016 Avanade Inc. All Rights Reserved.17
SPA implementatie
Implementatie
©2016 Avanade Inc. All Rights Reserved.
![Page 18: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/18.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
• Dynamische Html in Experience Editor
• SPA in Experience Editor
• Placeholder
• Alles altijd aanpasbaar
• Koppelingen leggen naar dynamische html
• Optioneel: Model vanuit Sitecore aanleveren
Uitdagingen
![Page 19: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/19.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
• Geen SPA in editor , wel in frontend
• Aanroep van window.top.Sitecore.PageModes.ChromeManager.resetChromes()
• AngularJS directives
• If..else… constructies
• Service API Controller
Oplossingen
![Page 20: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/20.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
• Demo van SPA implementatie
Demo
![Page 21: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/21.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
• Integratie met personalisatie vanuit javascript
• Generieke oplossing voor een Angular Sitecore mode
Wat blijft er over?
![Page 22: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/22.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
Divider
Subhead
©2016 Avanade Inc. All Rights Reserved.22
Afronding
Conclusie
©2016 Avanade Inc. All Rights Reserved.
![Page 23: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/23.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
• AngularJS is goed te gebruiken
• Er is niet veel moeite nodig
• Het gaat voornamelijk om concepten
• Nog wel wat open punten voor SPA (A/B Testing), full SPA in experience editor
• Risico: er wordt gebruik gemaakt van Sitecore javascript
Opsomming
![Page 24: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/24.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add titleVragen?
![Page 25: Sitecore en AngularJS: hoe werken ze samen/media/SUGNL/Meetings/Developer... · applications. It aims to simplify both the development and the testing of such applications by providing](https://reader034.vdocuments.net/reader034/viewer/2022042305/5ed153bf238043426329d27b/html5/thumbnails/25.jpg)
©2016 Avanade Inc. All Rights Reserved.
Click to add title
• Email : [email protected]
• Blog: http://hookedon.digital
Meer informatie