MgnlKickstart - Develop Magnolia Websites Faster, Better And Easier

1. HTML / CSS / JS   FASTER BETTER AND EASIER DEVELOP MAGNOLIA WEBSITES VIVIANSTELLER 2014-06-26

2. Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 2 About the speaker VIVIANSTELLER FOUNDER,CXO

3. Introduction What’s Kickstart? Motivation Idea Fundamental The How it works… DEMO Benefits Usage Roadmap Q&A+ The

4. End Presentation Agenda What’s the problem? Solution Kickstart How to use want Kickstart Why you to use

5. 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 

6. 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 Bugﬁxing Test HTML / CSS / JavaScript Frontend  Development Freemarker / Java Backend  Development Magnolia Development Deployment M4 “full-blown”

7. Maven

8. project requires

9. application

10. server deployment simple

11. setup Imple-  mentation M3 Design M2 Concept M1 lightweight

12. Magnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier HTML / CSS / JavaScript Freemarker / Java Testing Bugﬁxing 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

13. 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

14. Server (Hot)

15. Deployment TIME CONSUMING

16. 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

18. paste

20. modify Java + Magnolia Conﬁgurations extend

22. override 39x

23. HTML

24. files

25. 894 KB  ~17.000

26. lines

27. of

28. code 106x

29. JavaScript

30. files

31. 1.8 MB  ~40.000

32. lines

33. of

34. code 8x

35. CSS

36. files

37. 189 KB  ~8.800

38. lines

39. of

40. code EXPERTS ONLYWHERE TO START? STK Templating IT GETS A MESS / MAINTENANCE HELL

41. Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 9 PROBLEM  CONFIGU- RATION  OVERKILL #3Dialog Conﬁguration ERROR PRONE Template Deﬁnitions TEDIOUS ANNOYING copy

43. paste

45. modify TIME CONSUMING

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

47. CSS,

48. JS Backend  Freemarker,

49. Configuration,

50.   Java

51. Code requires

52.   constant

53. synchronization

54. Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 11 MANY  PROBLEMS  HOW TOSOLVE  THEM?

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

56. Magnolia 13 Template DefinitionsStatic   Prototype HTML JSCSSIMG Single

57. Source

58. of

59. Truth Dialog Definitions Template Scripts Website Content I18n Messages … Configura- tions Generate Magnolia Artifacts MGNLKICKSTART Kickstart Markup Meet Magnolia Kickstart

60. 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

61. 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

62. 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

63. 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

64. 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

65. 19 kickstart:page name=“article” … nav class=“main” kickstart:navigation name=“main” startLevel=“1” levels=“2” ul  li class=active trail  strong a href=#magnoliaMagnolia CMS/a  /strong  /li li a href=#javaeeJava EE/a /li /ul /kickstart:navigation /nav … /kickstart:page Kickstart Tags EXTENDED How Kickstart works

66. 20 kickstart:page name=“article” … nav class=“main” kickstart:navigation name=“main” startLevel=“1” levels=“2” ul  li class=active trail  strong a href=#magnoliaMagnolia CMS/a  /strong  /li li a href=#javaeeJava EE/a /li /ul /kickstart:navigation /nav … /kickstart:page Kickstart Tags EXTENDED SAVE EVEN   MORE TYPING How Kickstart works EXTENDED  FEATURES Convention

67. Over

68. Configuration optional

69. 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.

74. Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 26 IT’S  DEMO  TIME!

76. Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 28 0.5SEC

77. 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

78. Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 30 ⌘ C ⌘ V SKIPTHE BOILERPLATE

79. 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

80. Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 32 KICKSTART  BENEFITSWHYYOU  WANTTOUSE THETOOL

81. 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

82. components your

83. frameworks EASIER TO  MAINTAIN only

84. maintain  what

85. you

86. need

87. 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

88. Magnolia

89. artifacts EASIER TO  MAINTAIN make

90. less

91. errors fewer

92. tests

93. 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

94. boilerplate EASIER TO  MAINTAIN no

95. dumb

96.   copy

98. paste

99. and

100. modify much

101. faster

102. Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 36 HOWTO   USE  KICKSTART  ?

103. 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

104. 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

105. 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

106. IDE  WebStorm,

107. ... Browser

108. Maven Java

109. IDE  IntelliJ,

110. Eclipse,

111. ... Tomcat

112. Browser

113. Web

114. Editor  Coda,

115. ...

116. 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

118. checkout

119. later

120. on Kickstart Development Cloud Edit

121. Resources Kickstart

122. Markup Checkout

123. as

124. WAR Checkout

125. as

126.   Maven

127. project Publish

128. to  online

129. instance Download

130.   from

131. Web Choose

132. from

133.   Template Upload

134. your

135. own

136. COMING SOON

137. 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

138. Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 41 WHAT’S   THE  STATUS  ?

139. 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

140. Preview Try

141. Kickstart

142. in

143. the

144. cloud BETA Public

145. Preview Aligned

146. with

147. Magnolia

148. 5.4 Try

149. Kickstart

150. locally 1.0 Final

151. Release Officially

152. Supported Use

153. Kickstart

154. in

155. Production ? Tooling Integrations Library

156. Support

157. Magnolia Kickstart – Develop Magnolia Websites Faster, Better and EasierMagnolia Kickstart – Develop Magnolia Websites Faster, Better and Easier 43 STAYINTOUCH  REGISTER  NOWON  KICKSTART.IO

158. THANK  YOU! lemonizeWebSolutions.OnDemand.

MgnlKickstart - Develop Magnolia Websites Faster, Better And Easier

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to MgnlKickstart - Develop Magnolia Websites Faster, Better And Easier

Similar to MgnlKickstart - Develop Magnolia Websites Faster, Better And Easier (20)

Recently uploaded

Recently uploaded (20)

MgnlKickstart - Develop Magnolia Websites Faster, Better And Easier