![Page 1: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/1.jpg)
Episerver
Exploring OPE with Angular and ReactOn-Page Edit ♥ Client-Side Rendering
Episerver Ascend
Stockholm, Sweden
2018-05-15
![Page 2: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/2.jpg)
Episerver
John-Philip “JP” Johansson
Team Lead
CMS UI – we make the editor UI
![Page 3: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/3.jpg)
CMS UI team blog
http://world.episerver.com/blogs/?type=cmsblog
We want to blog more.
Encourage us.
![Page 4: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/4.jpg)
Episerver
Short story
![Page 5: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/5.jpg)
2013 – AngularJS site
![Page 6: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/6.jpg)
2013 – AngularJS site
![Page 7: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/7.jpg)
2013 – AngularJS site
![Page 8: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/8.jpg)
Episerver
7 common scenarios
Time constraint: Solutions will swoosh by ☺
![Page 9: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/9.jpg)
<div @Html.EditAttributes(m => m.Image)><img ng-src="{{$ctrl.image.url}}" /><em>{{$ctrl.image.text}}</em>
</div>
1. Using JS framework for rendering properties
![Page 10: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/10.jpg)
Step 1/2: Owning the rendering
@Html.EditAttributes(m => m.Image)><img ng-src="{{$ctrl.image.url}}" /><em>{{$ctrl.image.text}}</em>
</div>
<div
![Page 11: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/11.jpg)
Step 1/2: Owning the rendering
data-epi-property-name="image"><img ng-src="{{$ctrl.image.url}}" /><em>{{$ctrl.image.text}}</em>
</div>
<div Old
&
Optional
![Page 12: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/12.jpg)
Step 1/2: Owning the rendering
data-epi-property-name="image">
<img ng-src="{{$ctrl.image.url}}" /><em>{{$ctrl.image.text}}</em>
</div>
data-epi-property-render="none"><div
New value
CMS UI 10.12.0
![Page 13: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/13.jpg)
{"successful":true,"contentLink":"1317_1356","hasContentLinkChanged":false,"savedContentLink":"1317_1356","publishedContentLink":null,"properties":[
{"name":"image","value":"9","successful":true,"validationErrors":null,"committed":false
}],"validationErrors":[]
}
epi.subscribe("beta/contentSaved",
function(details) {console.log("Update!", details);
}
);
Step 2/2: Updating the client-side data
CMS UI 10.12.0
![Page 14: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/14.jpg)
https://world.episerver.com/blogs/john-philip-johansson/dates/2017/10/taking-control-of-client-side-rendering-in-ope-beta/
![Page 15: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/15.jpg)
2. Episerver renders additional HTML element in edit mode
<div>The property will be rendered here:@Html.PropertyFor(m => m.Text
</div>)
If this had been a <p> then the styling
would break even more
![Page 16: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/16.jpg)
2. Episerver renders additional HTML element in edit mode
<div>The property will be rendered here:
new { CustomTag = "span"})
</div>
@Html.PropertyFor(m => m.Text
![Page 17: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/17.jpg)
https://world.episerver.com/blogs/john-philip-johansson/dates/2018/4/designing-frontends-for-ope-without-wrapping-elements/
![Page 18: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/18.jpg)
3. Client-side page switch breaks edit context
![Page 19: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/19.jpg)
3. Client-side page switch breaks edit context
• Consider the users mental model of Pages and Blocks
• Routing in SPA’s
• Turn off in Edit mode
• Forward to Episerver
• Handles language, personalization, and more
![Page 20: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/20.jpg)
Element not present on load
does not get editing context
4. Client-side DOM changes break on-page editing overlays
Missing blue outline
![Page 21: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/21.jpg)
11.2.0: Publish messageepi.publish("beta/domUpdated");
11.4.0: Auto-detected
4. Client-side DOM changes break on-page editing overlays
Blue outline!
CMS UI 11.2.0
CMS UI 11.4.0
![Page 22: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/22.jpg)
5. Preview content rendered outside of Episerver
![Page 23: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/23.jpg)
5. Preview content rendered outside of Episerver
• IFrameComponent and update view on "beta/contentSaved“
• See lab 5:
https://github.com/seriema/ascend2018-lab-extend-ui
![Page 24: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/24.jpg)
• Rendered in node.js
• Common for SEO
• Mobile apps and other targets
6. Resolve non-ASP.NET templates for content/property types
![Page 25: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/25.jpg)
6. Resolve non-ASP.NET templates for content/property types
Under consideration. Meanwhile, some tips:
• Simple node server
• https://github.com/aspnet/JavaScriptServices
• ReactJS.NET
• Episerver TemplateDescriptor
• https://world.episerver.com/documentation/developer-guides/CMS/rendering/templatedescriptor-and-tags/
![Page 26: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/26.jpg)
7. Content API for non-Episerver rendering
• A lot of freedom (too much?)
• Reinventing the wheel
![Page 27: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/27.jpg)
7. Content API for non-Episerver rendering
JOS.ContentSerializer (formerly JOS.ContentJson)
• Community driven
• Sensible defaults, and customizable
• https://github.com/joseftw/JOS.ContentSerializer
JOS.ContentAPI
• Uses JOS.ContentSerializer
• Doesn’t require Find
• https://github.com/joseftw/JOS.Epi.ContentApi
![Page 28: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/28.jpg)
7. Content API for non-Episerver rendering
EPiServer.ContentDeliveryApi 1.0.0 (beta)
• Doesn’t require Find everywhere
• http://nuget.episerver.com/package-
details/?packageId=EPiServer.ContentDeliveryApi
https://sdk.episerver.com/ContentDeliveryAPI/Index.html
![Page 29: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/29.jpg)
Episerver
Demo
![Page 30: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/30.jpg)
Episerver
Now what?
![Page 31: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/31.jpg)
Sticky-View Mode
CMS UI 10.11.0
![Page 32: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/32.jpg)
Sticky-View Mode
![Page 33: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/33.jpg)
Avoid using internal and
obsolete CMS UI API’s
Lint your JavaScript
![Page 34: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/34.jpg)
Online resources
• CMS Team blog posts on world.episerver.com/blogs
• CMS Developer guide on world.episerver.com/documentation
• GitHub
• github.com/episerver/AlloyReact
• github.com/episerver/AlloyAngularJS
• github.com/episerver/AlloyNoJS
• github.com/seriema/eslint-plugin-episerver-cms
• github.com/seriema/ascend2018-lab-extend-ui
![Page 35: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/35.jpg)
We’re curious on your solutions
What are you or your editors experiencing with On Page Editing and
client-side frameworks? Let us know!
![Page 36: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/36.jpg)
Episerver
Questions?
![Page 37: ExploringOPE withAngularand React - Episerver · Episerver ExploringOPE withAngularand React On-Page Edit ♥Client-Side Rendering Episerver Ascend Stockholm, Sweden 2018-05-15](https://reader030.vdocuments.us/reader030/viewer/2022041016/5ec8479f7f13ff00bc616dcc/html5/thumbnails/37.jpg)
Episerver
THANK YOU!