Dutch Umbraco Festival 2013J&J’s adventures with frameworks base sites

Jeavon Leopold - Twitter: @crumpled_JeavonJeroen Breuer - Twitter: @j_breuer

What and why?What is our framework/base site…?• It’s a prebuilt Umbraco 6.1.x Mvc implementation with a very simple front end site• We always start a new project with a copy of the current framework version• Contains latest Umbraco core, packages, config tweaks, customisations, common Razor Mvc snippets

& starter base document types• It comes with a Bootstrap UI but this isn’t generally used for the basis of front end development

You are on page 212/04/2023

Why do we need a framework?Creating a site from scratch is pretty easy with Umbraco, right?• Yes, but if you have a common approach at the beginning of each project, it makes it easy for a new

developer to get to grips very quickly with something they haven’t worked on before.• Example, a document type structure and naming from 3 different sites

You are on page 312/04/2023

Why do we need a framework?Reducing YSOD fear• For a C# developer, a YSOD is just something to fix, for a front end developer or project manager a

YSOD can be a very scary thing• By checking and confirming compatibility of packages against the current Umbraco version included in

our framework we significantly reduce the chance of a package causing a YSOD and that makes a happy team!

You are on page 412/04/2023

Scott – Crumpled Production Director, fed on a diet of team efficiency

Why do we need a framework?Save team time when starting every new project & enables our front end developers to do more• Compatible packages preinstalled• Common Razor helpers and snippets ready to go for news, galleries and others• Configured for SASS support using Optimus so our front end developers get going straight away

You are on page 512/04/2023

Will & Gui – Crumpled front end development team, fed on a diet of Sass, jQuery & HTML5

Packages shipped with Crumpled FrameworkThe Umbraco bare bones packages…

…if you are not using all of these already, you should be!

All Open Source and Free, wow!• uComponents v6.0 (nightly release)• DAMP v2.6 CropUp version + DAMP Property Editor Value Converter• Eksponent CropUp• Imageresizer• SlimImage and SlimResponse• Umbraco Core Property Editor Value Converters (we created this as a result of using it in our framework)

Additionally • Imageresizer Disk Cache Plugin ($849, worth every dime!)

All made possible by these amazing people

You are on page 612/04/2023

Packages shipped with Crumpled FrameworkThe Essentials for us• SEO Checker (€99 per domain, €499 unlimited!)• Structure Extensions v2.0• Optimus + SASS transformer• uSync v1.4• Config Tree• Diplo Trace Log Viewer

The helpful starters• Document Sorter• Contour (€99 per domain)• ezSearch

All made possible by these amazing people and a dinosaur

You are on page 712/04/2023

Packages shipped with Crumpled FrameworkThe alternative options• Image Cropper Extended• AST Amazon S3

Why? • For some very high usage websites it is cost effective to serve media and crops from Cloudfront CDN• These two packages together now enable this to happen out of the box!• Includes a RTE content parser to ensure that media placed into the RTE is also served from CDN!• http://www.screenr.com/P8NH

Made possible by these amazing people

You are on page 812/04/2023

Custom Umbraco Dashboards

You are on page 912/04/2023

Configuration Tweaks – web.config

You are on page 1012/04/2023

Maximum upload size

and also, within system.webserver element

Maximum JSON serialization length

Configuration Tweaks – web.config

You are on page 1112/04/2023

SVG and other common Mime types

Static content client caching

Configuration Tweaks – web.config

You are on page 1212/04/2023

Static and Dynamic Url Compression

Note: Compression module must be installed in IIS and also isn’t available in IIS Express

Configuration Tweaks – umbracoSettings.configUrl character replacement

You are on page 1312/04/2023

Thanks to Tim at Site Doctor for his ultimate list that has been incorporated

http://blogs.thesitedoctor.co.uk/tim/2012/11/09/The+Ultimate+UrlReplacing+Character+List+For+Umbraco.aspx

Developing in a team with a shared database

You are on page 1412/04/2023

Disable XML Cache whilst in development

Setup QA server in load balancing distribution

Starter snippets, conventions & doc typesRazor Starter Views/Snippets for• Common navigations and navigation groups – we created a package

called NavIt• Breadcrumbs• Starter news section – section page, master/detail pattern & archive• Starter team section• Additionally, case studies, galleries, contact pages etc…

Initial master document types

You are on page 1512/04/2023

After much discussion we have adopted a inheriting structure:• MasterDocType – contains the properties

that every page used on a site must have• Site-MasterDocType – Container for multiple

sites contains specific properties for that site• Site-Homepage – Properties for that sites’

homepage• Site-Content-MasterDocType – Container for

every page on the website, has pageH1Title & bodyText

An additional convention we have adopted is a label property with a alias of isDataNode, navigation snippets, sitemaps etc will all ignore any node with property in existence.

Get a copy of our framework now fromhttps://github.com/jbreuer/Hybrid-Framework-Best-Practices

Crumpled Dog Design - 18 Phipp St, London EC2A 4NU020 7739 5553 | jeavon@crumpled-dog.com | www.crumpled-dog.com