44
HTML / CSS / JS FASTER BETTER AND EASIER DEVELOP MAGNOLIA WEBSITES VIVIAN STELLER 2014-06-26

Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Embed Size (px)

DESCRIPTION

Whether you are going to build a small community website or a large enterprise solution, you will have to perform a great number of repetitive and tedious tasks. What if there was a solution to just skip it all and start with the fun part? Vivan, founder of Lemonize, will show you how Kickstart is one step further into Magnolia's future frontend development vision and how this vision is soon to become a reality.

Citation preview

Page 1: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

HTML /

CSS / JS FASTER

BETTER AND EASIER

DEVELOP MAGNOLIA WEBSITES

VIVIAN STELLER 2014-06-26

Page 2: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 2

About the speaker

VIVIAN STELLER FOUNDER, CXO

Page 3: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Introduction What’sKickstart?

Motivation

Idea

Fundamental

The

How itworks…

DEMO

BenefitsUsage

RoadmapQ&A+

The����������� ������������������  End

Presentation Agenda

What’s theproblem?

Solution

KickstartHow to use want

Kickstart

Why you

to use

Page 4: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 4

KICKSTART EASES

MAGNOLIA DEVELOPMENT

IS A TOOL THAT

Page 5: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 5

Preparation Realization

Docu-mentation &

Training

M5

Delivery

HTML / CSS / JavaScript

Frontend Development

Freemarker / Java

BackendDevelopment

Testing & Bugfixing

Test

HTML / CSS / JavaScript

Frontend Development

Freemarker / Java

BackendDevelopment

Magnolia Development

Deployment

M4

“full-blown”����������� ������������������  Maven����������� ������������������  project requires����������� ������������������  

application����������� ������������������  

server

deployment

simple����������� ������������������  setup

Imple-mentation

M3Design

M2Concept

M1

lightweight

Page 6: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier

HTML / CSS / JavaScript Freemarker / JavaTesting & Bugfixing

Frontend Development

BackendDevelopment

Test

6

Initia

l

1. Create HTML/CSS/JS 2. Identify page/areas/components in static HTML

3.Create template definition (Copy & Paste and edit)

4.Create template script, Copy & Paste HTML, replace markers

5. Implement model class 6.Create dialog definition (Copy

& Paste and edit) 7. Create sample content 8.Align HTML, template and

dialog definitions…

9. Verify if BE matches FE

Cha

nge

DON’T FORGET TO

EXPORT YOUR

CHANGES!!!

Magnolia Development

Page 7: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier

EXPERTS ONLY

7

PROBLEM COMPLEX SETUP #1 Maven

Application����������� ������������������  Server

(Hot)����������� ������������������  Deployment

TIME CONSUMING

Page 8: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 8

PROBLEM STK DEFICITS #2HTML

PrototypeFreemarker copy����������� ������������������  &����������� ������������������  paste����������� ������������������  &����������� ������������������  modify

Java + Magnolia

Configurations

extend����������� ������������������  &����������� ������������������  override

39x����������� ������������������  HTML����������� ������������������  files����������� ������������������  894 KB

~17.000����������� ������������������  lines����������� ������������������  of����������� ������������������  code

106x����������� ������������������  JavaScript����������� ������������������  files����������� ������������������  1.8 MB

~40.000����������� ������������������  lines����������� ������������������  of����������� ������������������  code

8x����������� ������������������  CSS����������� ������������������  files����������� ������������������  189 KB

~8.800����������� ������������������  lines����������� ������������������  of����������� ������������������  codeEXPERTS ONLYWHERE TO START?

STK Templating

IT GETS A MESS / MAINTENANCE HELL

Page 9: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 9

PROBLEM CONFIGU-RATION OVERKILL #3

Dialog Configuration

ERROR PRONETemplate

DefinitionsTEDIOUS &

ANNOYING

copy����������� ������������������  &����������� ������������������  paste����������� ������������������  &����������� ������������������  modify

TIME CONSUMING

Page 10: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier

#410

PROBLEM FRONTENDBACKENDDEVELOP-MENT BREAKERROR PRONE

TIME CONSUMING

Frontend HTML,����������� ������������������  CSS,����������� ������������������  JS

Backend Freemarker,����������� ������������������  Configuration,����������� ������������������  Java����������� ������������������  Code

requires����������� ������������������  constant����������� ������������������  

synchronization

Page 11: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 11

MANY PROBLEMS

HOW TO SOLVE

THEM?

Page 12: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 12

Page 13: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia

13

Template DefinitionsStatic

Prototype

HTML

JSCSSIMG

Single����������� ������������������  So

urce����������� ������������������  of����������� ������������������  

Truth

Dialog Definitions

Template Scripts

Website Content

I18n Messages

Configura-tions

Generate Magnolia Artifacts

MG

NL K

ICKS

TART

Kickstart Markup

Meet Magnolia Kickstart

Page 14: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

14

How Kickstart works

<kickstart:page name=“base”> <html> <head> <title> <kickstart:field name=“title”>Title</kickstart:field> </title> </head> <body> <kickstart:area name=“main”> <kickstart:component name=“text”> <div class=“component text”> <h1 field:name=“headline”>Hello</h1> <p field:name=“text”>World!</p> </div> </kickstart:component> … </kickstart:area> </body> </html> </kickstart:page>

BASIC

Kickstart Markup

Page 15: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

15

How Kickstart works

<kickstart:page name=“base”> <html> <head> <title> <kickstart:field name=“title”>Title</kickstart:field> </title> </head> <body> <kickstart:area name=“main”> <kickstart:component name=“text”> <div class=“component text”> <h1 field:name=“headline”>Hello</h1> <p field:name=“text”>World!</p> </div> </kickstart:component> … </kickstart:area> </body> </html> </kickstart:page>

BASIC

Kickstart MarkupTEMPLATE

DEFINITION

Page 16: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

16

How Kickstart works

<kickstart:page name=“base”> <html> <head> <title> <kickstart:field name=“title”>Title</kickstart:field> </title> </head> <body> <kickstart:area name=“main”> <kickstart:component name=“text”> <div class=“component text”> <h1 field:name=“headline”>Hello</h1> <p field:name=“text”>World!</p> </div> </kickstart:component> … </kickstart:area> </body> </html> </kickstart:page>

BASIC

Kickstart MarkupTEMPLATE

DEFINITIONDIALOG

DEFINITION

Page 17: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

17

How Kickstart works

<kickstart:page name=“base”> <html> <head> <title> <kickstart:field name=“title”>Title</kickstart:field> </title> </head> <body> <kickstart:area name=“main”> <kickstart:component name=“text”> <div class=“component text”> <h1 field:name=“headline”>Hello</h1> <p field:name=“text”>World!</p> </div> </kickstart:component> … </kickstart:area> </body> </html> </kickstart:page>

BASIC

Kickstart MarkupTEMPLATE

DEFINITIONDIALOG

DEFINITION

TEMPLATE SCRIPT

Page 18: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

18

How Kickstart works

<kickstart:page name=“base”> <html> <head> <title> <kickstart:field name=“title”>Title</kickstart:field> </title> </head> <body> <kickstart:area name=“main”> <kickstart:component name=“text”> <div class=“component text”> <h1 field:name=“headline”>Hello</h1> <p field:name=“text”>World!</p> </div> </kickstart:component> … </kickstart:area> </body> </html> </kickstart:page>

NATURAL TEMPLATING

YOUR DESIGN WILL STAY INTACT

Page 19: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

19

<kickstart:page name=“article”> … <nav class=“main”> <kickstart:navigation name=“main” startLevel=“1” levels=“2”> <ul> <li class="active trail"> <strong> <a href="#magnolia">Magnolia CMS</a> </strong> </li> <li> <a href="#javaee">Java EE</a> </li> </ul> </kickstart:navigation> </nav> … </kickstart:page>

Kickstart Tags

EXTENDEDHow Kickstart works

Page 20: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

20

<kickstart:page name=“article”> … <nav class=“main”> <kickstart:navigation name=“main” startLevel=“1” levels=“2”> <ul> <li class="active trail"> <strong> <a href="#magnolia">Magnolia CMS</a> </strong> </li> <li> <a href="#javaee">Java EE</a> </li> </ul> </kickstart:navigation> </nav> … </kickstart:page>

Kickstart Tags

EXTENDED

SAVE EVEN

MORE TYPING

How Kickstart works

EXTENDEDFEATURES

Convention����������� ������������������  

Over����������� ������������������  

Configuration

optional

Page 21: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 21

CONSEQUENCES KILLER SPEED INSTANT SKIP THE BOILERPLATE STAY IN SYNC

SEE YOURCHANGESIMMEDIATELY.

1.2.3.4.

Page 22: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 22

CONSEQUENCES KILLER SPEED INSTANT SKIP THE BOILERPLATE STAY IN SYNC

SEE YOURCHANGESIMMEDIATELY.

1.2.3.4.

Page 23: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 23

CONSEQUENCES KILLER SPEED INSTANT SKIP THE BOILERPLATE STAY IN SYNC

SEE YOURCHANGESIMMEDIATELY.

1.2.3.4.

Page 24: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 24

CONSEQUENCES KILLER SPEED INSTANT SKIP THE BOILERPLATE STAY IN SYNC

SEE YOURCHANGESIMMEDIATELY.

1.2.3.4.

Page 25: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 25

CONSEQUENCES KILLER SPEED INSTANT SKIP THE BOILERPLATE STAY IN SYNC

SEE YOURCHANGESIMMEDIATELY.

1.2.3.4.

Page 26: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 26

IT’S DEMO TIME!

Page 27: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier
Page 28: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 28

0.5 SEC

Page 29: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 29

⌘ S

⌘ Tab

⌘ R

SAVECHANGES IN YOUR EDITOR

SWITCHTO YOUR BROWSER

REFRESHTHE PAGETO SEE

CHANGES

Page 30: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 30

⌘ C

⌘ V

SKIP THE BOILERPLATE

Page 31: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 31

ENHANCED STATIC

PROTOTYPE

FE BE

YOU’RE IN SYNC!

Kickstart Markup

Page 32: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 32

KICKSTART BENEFITS WHY YOU

WANT TO USE THE TOOL

Page 33: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 33

REASON YOUR PROJECTS ARE CUSTOM #1

FASTERMORE EFFICIENT

custom����������� ������������������  components

your����������� ������������������  

frameworks

EASIER TOMAINTAIN

only����������� ������������������  maintainwhat����������� ������������������  you����������� ������������������  

need

Page 34: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 34

REASON SAVE TIME = SAVE MONEY

#2MORE EFFICIENT

generate����������� ������������������  

Magnolia����������� ������������������  

artifacts

EASIER TOMAINTAIN

make����������� ������������������  less����������� ������������������  errors

fewer����������� ������������������  tests

Page 35: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 35

REASON YOU WILL LOVE IT #3

MORE EFFICIENT

no����������� ������������������  boilerplate

EASIER TOMAINTAIN

no����������� ������������������  dumb����������� ������������������  copy����������� ������������������  &����������� ������������������  paste����������� ������������������  

and����������� ������������������  modify

much����������� ������������������  faster

Page 36: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 36

HOW TO USE

KICKSTART ?

Page 37: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 37

MAVEN /LOCAL+

Kickstart Usage Options

Web DeveloperNo Magnolia

skills required

Magnolia BeginnerBasic Magnolia

know-how required

Magnolia ExpertIn-depth Magnolia knowledge required

Page 38: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier

Web Developerno Magnolia

skills required

Magnolia BeginnerBasic Magnolia

know-how required

Magnolia ExpertIn-depth Magnolia knowledge required

Magnolia

STK/Kickstart Templating

KickstartTransformation

HTML/CSS/JS + Kickstart

Markup

TemplatingStatic Prototyping

Web

De

velop

ment

Browser����������� ������������������  

KickstartTransformation

Magnolia

ScriptingLogic Coding

Groovy

HTML/CSS/JS + Kickstart

Markup

TemplatingDynamic

Freemarker

Mag

nolia

De

velop

ment HTML/CSS/JS

+ Kickstart Markup

Magnolia

KickstartTransformation

Magnolia

CodingLogic Coding

Java

Freemarker

Mag

nolia

+ Ja

va

Deve

lopme

nt

Kickstart Scales with your skills.

Web����������� ������������������  IDEWebStorm,����������� ������������������  ...

Browser����������� ������������������  

Maven

Java����������� ������������������  IDEIntelliJ,����������� ������������������  Eclipse,����������� ������������������  ...

Tomcat����������� ������������������  

Browser����������� ������������������  

Web����������� ������������������  EditorCoda,����������� ������������������  ...

Page 39: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 39

Register with Kickstart

Create Site

1.

Start with static prototype

2.

Develop with Kickstart

3.Deploy & Checkout

4.

Update & enhanceconstantly

5.

Edit����������� ������������������  &����������� ������������������  checkout����������� ������������������  

later����������� ������������������  on

Kickstart Development Cloud

Edit����������� ������������������  Resources

Kickstart����������� ������������������  Markup

Checkout����������� ������������������  

as����������� ������������������  WAR

Checkout����������� ������������������  as����������� ������������������  

Maven����������� ������������������  project

Publish����������� ������������������  toonline����������� ������������������  

instance

Download����������� ������������������  

from����������� ������������������  Web Choose����������� ������������������  

from����������� ������������������  Template

Upload����������� ������������������  your����������� ������������������  own����������� ������������������  

COMING SOON

Page 40: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 40

interactively and hands-on

Learn Kickstart

prepare & publishPitch Presentations

bootstrap & checkout a

Large Project

steadily enhance & Learn Magnolia

create & launch Micro Sites

Use Kickstart to…

Kickstart Use Cases

Page 41: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 41

WHAT’S THE

STATUS?

Page 42: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 42

Roadmap

Q3/2014 Q4/2014 Q1/2015

INCUBATION

Demo

FUTURE

1.xALPHA

Exclusive����������� ������������������  

Preview

Try����������� ������������������  Kickstart����������� ������������������  in����������� ������������������  the����������� ������������������  cloud

BETA

Public����������� ������������������  Preview

Aligned����������� ������������������  with����������� ������������������  Magnolia����������� ������������������  5.4

Try����������� ������������������  Kickstart����������� ������������������  locally

1.0

Final����������� ������������������  

Release

Officially����������� ������������������  Supported

Use����������� ������������������  Kickstart����������� ������������������  in����������� ������������������  Production

?

Tooling

Integrations

Library����������� ������������������  Support

Page 43: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 43

STAY IN TOUCHREGISTER NOW ON

KICKSTART.IO

Page 44: Magnolia Kickstart: Develop Magnolia Websites Faster, Better and Easier

THANKYOU!lemonize

Web Solutions. On Demand.