Umbraco Cape Town Meetup Presentation

Current UI (before)

www.bluegrassdigital.com

Sneak peak… New UI


What’s new in V7 Overview

01

Brand new UI – rewrite of the UI layer, using AngularJS

02

Container document types – loads nodes in a table view instead

03

Members – ported over to angular. Member trees use the new

04

Localization – Serverside data is localized. Clientside API for

05

Search – now supports direct access to the context menu for each

06

New Editors – Content, Media and the Datatype editor views have

07

Browsers/Devices – works in all major browsers, tablets & mobile

of the tree

format.
localizing angular views.
result.

been completely rewritten

gesturing supported

Coming soon… Umbraco v7.0.0
STATUS: In Progress
94% Complete | 3% In Progress

Core Update release schedule:
Tues 4th November > release candidate
Thurs 21st November > 7.0 final release

Any new release scheduled for v6.2? YES – but it will be post v7.

DOWNLOAD v7 (beta) HERE

What do ‘The People’ say?


A glimpse into what we do…
1. Customise your Login screen
A nice touch to give to clients is to view a branded login page:

2. Customise your icons
It’s not always about the dev, but the UI of the CMS is
important as well. Customising icons is a great way to help
clients to visualise different sections.


A glimpse into what we do… (cont)
3. Global Settings Area
We house all the site wide; configuration; social; form
settings under one roof. This is a great way to keep your

CMS neat and tidy and helps with the usability too.

4. URL / Nav Properties
We add under the ‘Properties’ tab for all
nodes options for the CMS user to

control whether pages should show in
the nav; sitemap; URL naming alias;
Umbraco redirect option.

5. SEO Properties
Allow CMS users to completely control the site SEO properties and OpenGraph tags


6. Repositories
We recommend you use
repositories to house your

modular / common content
together, which can then be
selected for display on
different pages/nodes. When
sites have intricate workflows
between email groups, we use
the repositories to setup all
your email groups, which are
then accessed from whatever
form needs to.

7. Embedded Control & Notification Messages
Our preferred repeatable control is the ‘Embedded Control’ package. We use it a lot! We
also try to ensure that CMS users can personalise messages i.e. [[FULLNAME]]


8. Image Map / Hotspots
If you ever need to give clients the ability to create hot spots on an image or a map, we
can recommend an ImageMap package we’ve customised for our own uses.


Before our Base Libraries & Umbraco
This is what our code looked like…


The effect of Spaghetti


General Overview

01

Common code

02

Code re-use

03

Quick setup process

04

Provides structure


How did we change

01

Understanding of project specifications

02

A need for a common language, between Umbraco/our code

03

„Ubiquitous Language‟ – Domain Driven Design

04

Carrying that language through code

05

Moving away from ‘node this and node that’

06

uDDD was born

07

uPattern – our ‘Umbraco way’


Example scenario
eCommerce Scenario
•

A client would like to sell products from their website.

•

They have a list of products from which members of the site can order

Starting Point
1.

ProductListing Doc Type, Product Doc Type, Order Doc Type

2.

Represent these doc types in a form of a strongly type object in C#


Example code – Product


Example code (NEW) – Product Listing


Example code (OLD) – Product Listing


Example code – View Products


Example code – Member


Umbraco Installation VS Template


AngularJS
HTML enhanced for web apps
Umbraco User Experience written in AngularJS

When:

Developed in 2009

Who:

Google, Misko Hevery (his personal project). When working on
“Google Feedback” he dropped 17,000 lines of code to 1,500

Why:

- HTML is great for static documents, but not dynamic views.
- AngularJS lets you extend HTML vocabulary.
- Takes AJAX to a new level!

Power:

- Two way Data Binding:
Data-binding is an automatic way of updating the view
whenever the model changes. Angular rocks at this!

- Directives:
Lets you invent new HTML syntax, specific to your
application

Are there alternatives?
Alternative to AngularJS
• backboneJS
• KnockoutJS
• EmberJS
• … many more

Resources
Angular Website - http://angularjs.org/


Our Frontend Stack
OVERVIEW
1. AngularJS
2. CSS Pre-processing (SASS)

Why we chose our Tech Stack?
1. AngularJS – we wanted a JavaScript framework for creating applications. A
framework that was forward thinking with a growing & active community.
2. Pre-processing(SASS)
- Adopting a modular architecture for writing CSS.
- Uses Compass!!


Our Frontend Stack
Advantages of our stack?
1. Large active developer communities

2. Using SASS and adopting a modular approach, forces us to write CSS that
is easily reusable within a CMS

3. Using AngularJS, front end developers can write client side applications and
client side applications are cool! We can push the programing logic into the
front end. Easy using REST APIs

4. SMACSS http://smacss.com/
5. SASS http://sass-lang.com/

6. SASS http://compass-style.org/

What we Love on the Front End!
Sass

Compass

AngularJS

01

01

01

Most powerful CSS
extension language
available.

Cleaner Mark-up

Awesome JavaScript for
web apps

02

02
Contains the webs best
reusable patterns

02
Two Way Data Binding

Mature

03

03

03

Sprites are a Breeze!

Directives

04

04

Compass mixins make
CSS3 easy

Easy to uses with REST

Feature Rich

04
Large Community

05
Industry Proven


Create the Elements, Modules


Assemble the Layout


Umbraco Cape Town Meetup Presentation

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (7)

Similaire à Umbraco Cape Town Meetup Presentation

Similaire à Umbraco Cape Town Meetup Presentation (20)

Plus de Bluegrass Digital

Plus de Bluegrass Digital (7)

Dernier

Dernier (20)

Umbraco Cape Town Meetup Presentation