As recommended for content reusability we use Symbols heavily to keep content, styles & JS code maintainable inside builder. Very similar to how you would construct components in an Angular app using content projection.
At times we have got symbols with slots that have symbols placed inside them.
Is there any particular limits we should be aware of ? Is there a performance implication of using lots of symbols?
I do notice that using symbols creates an explosion of div tags in the generated HTML which probably makes my site more difficult to crawl. Im sure my SEO specialist is going to complain about this & tell me to use Wordpress
In summary we are asking the best approach to achieving:
Maximum reusability of our content, JS code & styles to keep our website maintainable. This is very important as it is naturally more difficult to keep this type of thing maintainable inside a (Very Flexible) low code platform than it is in a traditional development environment.
Maximum Performance
Minimal (as possible) Clean Semantic HTML . We have been changing tags to the semantic ones like “<section” where appropriate.
As a side note it would be great to have some more best practice guidelines / documentation around the use of the editor. It is amazingly flexible but through this flexibility and the fact that it is a low code platform I find it difficult to determine exactly what the best practices are compared to a traditional development environment.
Thanks for reaching out! You shouldn’t face any issues with using lots of symbols or notice an impact with the div generation. There is potential for fetching performance, but once fetched, it is cached.
And thank you for your feedback! We’re always looking to improve our documentation. Is there any particular topics you’d like to see added or just best practices in general? I’d recommend checking out our guides around Symbols in our knowledge base.
Thanks for this! Just best practices and performance considerations in General that use “in production” examples .
Heres a collection of thoughts & questions that have come up as I’ve been learning how to use Builder and sometimes spent hours trying to find answers. Hopefully this feedback helps and makes it easier for new users to pick up :
When we (and non technical people) are building stuff in the editor how would they know if what they are building has a performance impact? Could we put some performance consideration guidelines together so that people know what to consider when putting a page together inside builder?
Is there a performance impact to using inherit state ?
Is there semantic HTML guide for builder ? At the moment everything defaults to divs ? Which layer do we rename to < section>" Do I rename the tag on your built in Section component ? Do I rename a tag closer to my content ?
Builder SEO checklist & guidelines ?
How many levels can we nest reusable symbols inside slots without having a significant performance impact ?
Each symbol component appears to add 13 levels of html ?
-Doesn’t this make it harder for search engines to crawl my site ?
What is the best approach to keeping a Builder website maintainable for big teams ?
JS code maintainability guide, is there any way to have a global view of all the JS that has been added to pages & symbols ?
Is there a way to have Type script added to Builder ? I really don’t love writing vanilla JS & I can’t leverage my Angular components (because of the limitations) to minimise the amount of vanilla JS I have to write within my website.
Binding best practices (or maybe even validation) to avoid error messages ?
Documentation (Not forum posts) around context.builderContent, include Refs, `noTravers=false and other obscure properties that are difficult to find on the forum for a person that is new to builder.
How do we select a DOM element “within” a symbol using JS without getting every other instance of that DOM element in other instances of the same symbol on a given page ?
Accessibility Guide, will screen readers have difficulty with the generated HTML ?
Internationalisation Guide ?
Guidelines to set up pages for multiple countries ?
Am I missing something before I launch my website ? (A website launch checklist would be great )
It would be great to have some best practice builder specific guidelines to follow as people build it so that it minimises the risk of SEO/Technical/Marketing & Performance issues later on.
The product is so amazing that often there are solutions for any question that ever gets asked already built in, its just a little difficult to find the information you need at times.
.