MgnlKickstart - Develop Magnolia Websites Faster, Better And Easier

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

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

Page 1: MgnlKickstart - Develop Magnolia Websites Faster, Better And Easier

HTML /

CSS / JS FASTER

BETTER AND EASIER

DEVELOP MAGNOLIA WEBSITES

VIVIAN STELLER 2014-06-26

Page 2: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - Develop Magnolia Websites Faster, Better And Easier
Page 28: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - 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: MgnlKickstart - Develop Magnolia Websites Faster, Better And Easier

THANKYOU!lemonize

Web Solutions. On Demand.