MgnlKickstart - Develop Magnolia Websites Faster, Better And Easier
Upcoming SlideShare
Loading in...5
×
 

MgnlKickstart - Develop Magnolia Websites Faster, Better And Easier

on

  • 253 views

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.

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.

Statistics

Views

Total Views
253
Views on SlideShare
241
Embed Views
12

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 12

https://twitter.com 12

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • HTML / CSS / JS 
 FASTER BETTER AND EASIER DEVELOP MAGNOLIA WEBSITES VIVIANSTELLER 2014-06-26
  • Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 2 About the speaker VIVIANSTELLER FOUNDER,CXO
  • Introduction What’s Kickstart? Motivation Idea Fundamental The How it works… DEMO Benefits Usage Roadmap Q&A+ The
  •   End Presentation Agenda What’s the problem? Solution Kickstart How 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 ISA 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 Backend
 Development Testing & Bugfixing Test HTML / CSS / JavaScript Frontend
 Development Freemarker / Java Backend
 Development Magnolia Development Deployment M4 “full-blown”
  •   Maven
  •   project requires
  •    application
  •    server deployment simple
  •   setup Imple-
 mentation M3 Design M2 Concept M1 lightweight
  • Magnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier HTML / CSS / JavaScript Freemarker / Java Testing & Bugfixing Frontend
 Development Backend
 Development Test 6 Initial 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 Change 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 Prototype Freemarker 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
  •   code EXPERTS 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 #3Dialog Configuration ERROR PRONE Template Definitions TEDIOUS & ANNOYING copy
  •   &
  •   paste
  •    &
  •   modify TIME CONSUMING
  • Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier #4 10 PROBLEM
 FRONTEND
 BACKEND
 DEVELOP- MENTBREAKERROR 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 TOSOLVE
 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
  •   Source
  •   of
  •    Truth Dialog Definitions Template Scripts Website Content I18n Messages … Configura- tions Generate Magnolia Artifacts MGNLKICKSTART 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 Markup TEMPLATE
 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 Markup TEMPLATE
 DEFINITION DIALOG
 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 Markup TEMPLATE
 DEFINITION DIALOG
 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 EXTENDED How 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 EXTENDED
 FEATURES Convention
  •    Over
  •    Configuration optional
  • Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 21 CONSEQUENCES
 KILLERSPEED INSTANT SKIPTHE BOILERPLATE STAYINSYNC SEEYOUR
 CHANGES
 IMMEDIATELY. 1. 2. 3. 4.
  • Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 22 CONSEQUENCES
 KILLERSPEED INSTANT SKIPTHE BOILERPLATE STAYINSYNC SEEYOUR
 CHANGES
 IMMEDIATELY. 1. 2. 3. 4.
  • Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 23 CONSEQUENCES
 KILLERSPEED INSTANT SKIPTHE BOILERPLATE STAYINSYNC SEEYOUR
 CHANGES
 IMMEDIATELY. 1. 2. 3. 4.
  • Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 24 CONSEQUENCES
 KILLERSPEED INSTANT SKIPTHE BOILERPLATE STAYINSYNC SEEYOUR
 CHANGES
 IMMEDIATELY. 1. 2. 3. 4.
  • Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 25 CONSEQUENCES
 KILLERSPEED INSTANT SKIPTHE BOILERPLATE STAYINSYNC SEEYOUR
 CHANGES
 IMMEDIATELY. 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.5SEC
  • Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 29 ⌘ S ⌘ Tab ⌘ R SAVECHANGES INYOUR EDITOR SWITCHTOYOURBROWSER REFRESHTHEPAGE
 TOSEE CHANGES
  • Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 30 ⌘ C ⌘ V SKIPTHE 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 INSYNC! Kickstart Markup
  • Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 32 KICKSTART
 BENEFITSWHYYOU
 WANTTOUSE THETOOL
  • Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 33 REASON YOUR PROJECTSARE CUSTOM #1 FASTER MORE EFFICIENT custom
  •   components your
  •    frameworks EASIER TO
 MAINTAIN only
  •   maintain
 what
  •   you
  •    need
  • Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 34 REASON SAVETIME= SAVE MONEY #2 MORE EFFICIENT generate
  •    Magnolia
  •    artifacts EASIER TO
 MAINTAIN make
  •   less
  •    errors fewer
  •   tests
  • Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 35 REASON YOUWILL LOVEIT#3 MORE EFFICIENT no
  •   boilerplate EASIER TO
 MAINTAIN 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 HOWTO 
 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 Developer No Magnolia 
 skills required Magnolia Beginner Basic Magnolia 
 know-how required Magnolia Expert In-depth Magnolia 
 knowledge required
  • Magnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier Web Developer no Magnolia 
 skills required Magnolia Beginner Basic Magnolia 
 know-how required Magnolia Expert In-depth Magnolia 
 knowledge required Magnolia STK/ Kickstart Templating Kickstart Transformation HTML/CSS/JS + Kickstart Markup Templating Static Prototyping Web
 Development Browser
  •    Kickstart Transformation Magnolia Scripting Logic Coding Groovy HTML/CSS/JS + Kickstart Markup Templating Dynamic Freemarker Magnolia
 Development HTML/CSS/JS + Kickstart Markup Magnolia Kickstart Transformation Magnolia Coding Logic Coding Java Freemarker Magnolia+Java
 Development Kickstart Scales with your skills. Web
  •   IDE
 WebStorm,
  •   ... Browser
  •    Maven Java
  •   IDE
 IntelliJ,
  •   Eclipse,
  •   ... Tomcat
  •    Browser
  •    Web
  •   Editor
 Coda,
  •   ...
  • 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 & enhance
 constantly 5. Edit
  •   &
  •   checkout
  •    later
  •   on Kickstart Development Cloud Edit
  •    Resources Kickstart
  •    Markup Checkout
  •    as
  •   WAR Checkout
  •    as
  •   
 Maven
  •    project Publish
  •   to
 online
  •    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 & publish
 Pitch 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.x ALPHA 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 STAYINTOUCH
 REGISTER
 NOWON
 KICKSTART.IO
  • THANK
 YOU! lemonizeWebSolutions.OnDemand.