MgnlKickstart - Develop Magnolia Websites Faster, Better And Easier

Post on 08-May-2015

415 views 5 download

description

MgnlKickstart is a tool for web developers, that tremendously eases creating fully custom, content manageable websites with the open source, enterprise-grade content management system Magnolia.

Transcript of MgnlKickstart - Develop Magnolia Websites Faster, Better And Easier

HTML /

CSS / JS FASTER

BETTER AND EASIER

DEVELOP MAGNOLIA WEBSITES

VIVIAN STELLER 2014-06-26

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

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

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

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

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

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

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

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

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

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

MANY PROBLEMS

HOW TO SOLVE

THEM?

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

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

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

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

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

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

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

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

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

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.

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.

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.

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.

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.

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

IT’S DEMO TIME!

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

0.5 SEC

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

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

⌘ C

⌘ V

SKIP THE BOILERPLATE

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

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

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

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

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

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

HOW TO USE

KICKSTART ?

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

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,����������� ������������������  ...

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

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

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

WHAT’S THE

STATUS?

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

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

THANKYOU!lemonize

Web Solutions. On Demand.