Modern Web Applications with Sightly
0 likes464 views
The document discusses updates and best practices for using Sightly in modern web applications, introduced at an Apache Sling tech meetup in Berlin. Key changes since the previous year include the integration of Sightly into Apache Sling's core and enhancements to its performance and syntax. The presentation also covers recommended practices for component structure, markup simplicity, and effective use of the Sightly API.
![adaptTo()
Modern Web Applications with Sightly
20
Markup - data-sly-include
Recommendations
<!--/* however you can avoid unwrapping it if… */-->
<!DOCTYPE html>
<html>
<head data-sly-include=“head.html”></head>
…
</html>
head.html:
<title>${properties.title || properties[‘jcr:title’]}</title>](https://image.slidesharecdn.com/adaptto2015raducotescumodernwebappssightly-151005101215-lva1-app6892/85/Modern-Web-Applications-with-Sightly-20-320.jpg)
Modern Web Applications with Sightly
- 1. APACHE SLING & FRIENDS TECH MEETUP BERLIN, 28-30 SEPTEMBER 2015 Modern Web Applications with Sightly rev 2.20151005 @raducotescu Apache Sling committer Computer Scientist @ Adobe Systems [email protected]
- 2. adaptTo() Modern Web Applications with Sightly 2 We’re talking about Sightly? Again?!
- 3. adaptTo() Modern Web Applications with Sightly 3 What’s changed since last September? 1. The Sightly reference implementation is now a part of Apache Sling’s core bundles and it’s actively maintained
- 4. adaptTo() Modern Web Applications with Sightly 4 What’s changed since last September? 2. In January 2015 version 1.1 of the language’s specification was published: • no more reserved option names • URI manipulation options • data-sly-repeat (similar to data-sly-list) • <sly/> (simpler alternative to data-sly-unwrap)
- 5. adaptTo() Modern Web Applications with Sightly 5 What’s changed since last September? 3. Several performance improvements brought Sightly on- par with the JSP Scripting Engine (backed by performance tests)
- 6. adaptTo() Modern Web Applications with Sightly 6 What’s changed since last September? 4. We’ve deprecated the asynchronous JavaScript Use API (mostly a clone of the Resource API) in favour of a leaner synchronous API provided by the org.apache.sling.scripting.javascript bundle.
- 7. adaptTo() Modern Web Applications with Sightly 7 What’s changed since last September? 5. More developers have started using Sightly in their projects
- 8. adaptTo() Modern Web Applications with Sightly 8 We have a language specification. We also have a reference implementation. But I still think we’re missing something…
- 9. adaptTo() Modern Web Applications with Sightly 9 Sightly Best Practices 1. Components content structure Organising our components thinking about reusability and flexibility is really important. 2. Markup We need to use the simplest markup that does the job. 3. Use API Having too many options can be confusing at times.
- 10. adaptTo() Modern Web Applications with Sightly 10 Components content structure 1. Try to define a structure that’s flexible enough that will naturally guide you to inherit from it 2. Avoid creating a new component from scratch if you can just extend one 3. Define some extension points, even though you might not be using them now
- 11. adaptTo() Modern Web Applications with Sightly 11 Components content structure
- 12. adaptTo() Modern Web Applications with Sightly 12 Markup Sightly aims to help developers write simple, uncluttered, easy to understand markup. Ideally a template’s markup should be as close as possible to the markup that will be rendered. Avoid thinking with a programming mindset when writing Sightly templates. Logic belongs somewhere else (hint: Use- API).
- 13. adaptTo() Modern Web Applications with Sightly 13 Markup - data-sly-text DOs <!--/* ok for placeholders */--> <p data-sly-text=“${properties.text}">Placeholder removed on rendering.</p> <!--/* if there are no placeholders */--> <p>${properties.text}</p> DONTs <!--/* unnecessary, as you don’t gain anything */--> <p data-sly-text=“${properties.text}"></p>
- 14. adaptTo() Modern Web Applications with Sightly 14 Markup - data-sly-attribute DOs <!--/* use it with attribute maps */--> <div data-sly-attribute=“${component.attributes}”>…</div> <!--/* otherwise */--> <a href=“#” title=“${link.title}”></a> DONTs <!--/* overkill */--> <a href=“#” data-sly-attribute.title=“${link.title}”></a>
- 15. adaptTo() Modern Web Applications with Sightly 15 Markup - data-sly-element DOs <!--/* context changeable elements */--> <list data-sly-element=“${list.ordered ? ‘ol’ : ‘ul’}”>…</list> <heading data-sly-element=“${component.h}”>…</heading> DONTs <!--/* hiding logic */--> <div data-sly-element=“${comp.elem}”></div>
- 16. adaptTo() Modern Web Applications with Sightly 16 Markup - data-sly-test DOs <!--/* store test evaluation for if/else */--> <div data-sly-test.author=“${wcmmode.edit}”>…</div> <div data-sly-test=“${!author}”>…</div> DONTs <!--/* repeatedly call the same test expression */--> <!--/* use it to define variables in your templates */-->
- 17. adaptTo() Modern Web Applications with Sightly 17 Markup - data-sly-list DOs <!--/* use it on markup that will be rendered */--> <ul class=“fruits” data-sly-list.fruit=“${fruits}”> <li class=“list-item ${fruitList.odd ? ‘odd’ : ‘even’}”> ${fruit} </li> </ul> DONTs <!--/* ok only if you cannot use data-sly-repeat */--> <sly data-sly-list.paragraph=“${paragraphs}” data-sly-unwrap> <p>${paragraph}</p> </sly>
- 18. adaptTo() Modern Web Applications with Sightly 18 Markup - data-sly-repeat (since 1.1) DOs <!--/* use it on markup that will be rendered */--> <p data-sly-repeat.paragraph=“${paragraphs}”>${paragraph}</p>
- 19. adaptTo() Modern Web Applications with Sightly 19 Markup - data-sly-include Recommendations <!--/* unwrap if the tag doesn’t provide meaningful markup */--> <!DOCTYPE html> <html> <sly data-sly-include=“head.html” /> … </html>
- 20. adaptTo() Modern Web Applications with Sightly 20 Markup - data-sly-include Recommendations <!--/* however you can avoid unwrapping it if… */--> <!DOCTYPE html> <html> <head data-sly-include=“head.html”></head> … </html> head.html: <title>${properties.title || properties[‘jcr:title’]}</title>
- 21. adaptTo() Modern Web Applications with Sightly 21 Markup - data-sly-resource Recommendations <!--/* same recommendations as for data-sly-include */-->
- 22. adaptTo() Modern Web Applications with Sightly 22 Markup - data-sly-use DOs <!--/* integrate it on the top-most tag where you need it; avoid unwrapping its container tag */--> <ul data-sly-use.var=“${..}” data-sly-list=“${var.list}”>… DONTs <!--/* use it in loops */--> <!--/* declare all your objects at the top of the script, on <sly> tags or using data-sly-unwrap */-->
- 23. adaptTo() Modern Web Applications with Sightly 23 Markup - data-sly-unwrap / <sly> DOs <!--/* use it sparingly, only when there’s no other option */--> <head data-sly-use.clientlib="/libs/granite/sightly/templates/ clientlib.html"> <sly data-sly-call="${clientLib.css @ categories='foundation'}" /> DONTs <!--/* use it to remove markup that shouldn’t have been there in the first place */-->
- 24. adaptTo() Modern Web Applications with Sightly 24 Markup - the context option DOs <!--/* use it carefully, when you really know what you’re doing*/--> <div data-type=“comment” data-path=“${comment.path @ context=‘uri’}”>… DONTs <!--/* use context=‘unsafe’ if actually a better value could be used */-->
- 25. adaptTo() Modern Web Applications with Sightly 25 Use-API It’s the only way to load helper objects for your Sightly scripts. While the specification only mentions templates, Java and JavaScript objects, the API’s implementation from Sling is much more powerful.
- 26. adaptTo() Modern Web Applications with Sightly 26 Use-API In Sling the Use-API can load: 1. Sling Models (they’re really cool to use!) 2. Java objects (whether they are OSGi services, are adaptable from SlingHttpServletRequest, Resource, implement Use or not, exposed from bundles or stored in the repository) 3. JavaScript objects, through the use function 4. Any other script evaluated by a Script Engine from Sling
- 27. adaptTo() Modern Web Applications with Sightly 27 Use-API - what’s the best option? If the logic is not strictly tied to a component and the Use- object is reusable between scripts: ➡ Java object stored in an OSGi bundle or a Sling Model (dependency injection FTW) If the logic is specific to a component: ➡ Java POJO stored in the repository, for best performance ➡ JavaScript stored in the repository, if your components are maintained mostly by front-end developers Use objects in the repository should still be treated as API!
- 28. adaptTo() Modern Web Applications with Sightly 28 Best practices on slides. Do we have an app? Yes. It’s called Publick. Initially developed by Nate Yolles, to host host his blog: https://github.com/nateyolles/publick-sling-blog.git Forked to implement best practices at: https://github.com/raducotescu/publick-sling-blog.git Purpose: Commit it to Sling, as a best practices Sightly + other Sling goodies fully functional demo application.
- 29. adaptTo() Modern Web Applications with Sightly 29 What is Publick? Yet another blog engine built on top of Apache Sling, Sightly, AngularJS and Bootstrap. AngularJS is only used for creating an interaction with existing Sling services (mostly the user admin from /system/userManager).
- 30. adaptTo() Modern Web Applications with Sightly 30
- 31. adaptTo() Modern Web Applications with Sightly 31
- 32. adaptTo() Modern Web Applications with Sightly 32
- 33. adaptTo() Modern Web Applications with Sightly 33
- 34. adaptTo() Modern Web Applications with Sightly 34 Questions?
- 35. adaptTo() Modern Web Applications with Sightly 35 Credits & resources 1. https://github.com/Adobe-Marketing-Cloud/sightly-spec/blob/master/ SPECIFICATION.md - Sightly HTML templating language specification 2. https://github.com/nateyolles/publick-sling-blog - original version of Publick 3. Hand-drawn icons from https://www.iconfinder.com/iconsets/49handdrawing