Date post: | 08-May-2015 |
Category: |
Software |
Upload: | vivian-steller |
View: | 417 times |
Download: | 5 times |
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.