PageRenderTime 86ms CodeModel.GetById 18ms app.highlight 63ms RepoModel.GetById 1ms app.codeStats 0ms

/samples/scalate-presentation/src/scalate.jade

http://github.com/scalate/scalate
Jade | 425 lines | 346 code | 79 blank | 0 comment | 5 complexity | 4a79df8c27b5e731639959d178559a32 MD5 | raw file
  1!!! XML
  2!!!
  3- attributes("layout") = ""
  4- response.setContentType("text/html")
  5html(lang="en-US" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml")
  6  head
  7    meta(content="Scalate, see scalate.fusesource.org" name="generator")
  8    title Scalate, the Scala Template Engine
  9    meta(content="text/html; charset=us-ascii" http-equiv="Content-Type")
 10    meta(content="Copyright Š 2011, James Strachan" name="copyright")
 11    meta(content="5" name="duration")
 12    meta(content="-2" name="font-size-adjustment")
 13    link(type="text/css" href="styles/slidy.css" rel="stylesheet")
 14    link(type="text/css" href="styles/w3c-red.css" rel="stylesheet")
 15    link(href={uri("/css/pygmentize.css")} rel="stylesheet" type="text/css")
 16    script(space="preserve" type="text/javascript" charset="utf-8" src="scripts/slidy.js")
 17  body
 18    .background
 19      img#head-icon(name="head-icon" src="images/scalate/project-icon-107x107.png" alt="")
 20    .background.slanty
 21    .slide
 22      h1 Scalate: the Scala Template Engine
 23      img(alt="Scalate" src="images/scalate/project-logo.png")
 24      br(clear="all")
 25      p
 26        a(shape="rect" href="http://macstrac.blogspot.com/") James Strachan
 27        br(clear="none")
 28        a(shape="rect" href="http://twitter.com/#!/jstrachan") @jstrachan
 29        br(clear="none")
 30        a(shape="rect" href="http://fusesource.com/") FuseSource
 31    .slide
 32      :markdown
 33        # Your presenter: James Strachan
 34
 35        * James Strachan
 36          * twitter: @jstrachan
 37          * blog: [http://macstrac.blogspot.com/](http://macstrac.blogspot.com/)
 38        * Software Fellow at [FuseSource](http://fusesource.com)
 39        * long term Open Source contributor
 40          * created Apache Camel
 41          * created the Groovy programming language
 42          * co-founder of 
 43              * Apache ActiveMQ, Camel, ServiceMix, Fabric, ...
 44              * Scalate
 45    
 46    .slide
 47      :markdown
 48        # Scalate Overview
 49        
 50        ![Scalate](images/scalate/project-logo.png)
 51
 52        * its a **Scala** based **T**emplate **E**ngine
 53          * Scala T E => **Scalate**
 54
 55    .slide
 56      :markdown
 57        # Design Goals
 58
 59        ![Scalate](images/scalate/project-logo.png)
 60        
 61        * make an awesome template engine 
 62          * framework & container agnostic
 63        * support different template flavours under same API
 64          * there isn't really a one size fits all
 65        * reuse the power & type safety of Scala
 66          * catch errors in templates at edit/build time
 67              * templates are for life, not just for Christmas!
 68          * IDE friendly for smart completion
 69
 70    .slide
 71      :markdown
 72        # Features
 73
 74        * Templates are compiled & cached as fast Scala objects
 75        * Template objects are statically typed to catch typos
 76          * apart from Mustache
 77        * Scalate is equivalent to the combination of JSP, JSTL, JSP EL
 78                & SiteMesh/Tiles
 79          * Scala replaces JSP EL and Scala functions replace JSP
 80                    custom tags
 81          * Scalate template languages are richer, more powerful &
 82                    usually more DRY than JSP + JSTL
 83          * Scalate has in built layout support replacing
 84                    SiteMesh/Titles
 85              
 86
 87    .slide
 88      :markdown
 89        # How Scalate works
 90
 91        * TemplateEngine is used to load Templates
 92          * typically templates are converted into scala code and
 93                    compiled to avoid runtime parsing
 94          * can customize various things...
 95              * caching & reloading
 96              * how URIs are resolved (classpath, file system etc)
 97              * internationalisation
 98        * RenderContext is used to render a template
 99          * has a Map[String,Any] like set of attributes for
100                    passing/sharing state
101          * loads of helper methods for use inside the template
102              * localisation, including other templates, views,
103                        layouts etc
104        * template languages implemented using Scala parser generators
105
106    .slide
107      :markdown
108        # Scalate Template Languages
109
110        * SSP
111        * Scaml
112        * Jade
113        * Mustache
114        * Scuery
115
116    .slide
117      :markdown
118        # SSP
119
120        * SSP or _Scala Server Pages_
121          * like a non-sucky JSP :)
122        * easiest template engine to start with if folks know
123          * ASP, JSP, GSP, Erb, Velocity, FreeMarker style templates
124        * supports JSP / Erb style syntax 
125          * <% statements %>
126          * <%= expression %>
127          * ${expression}
128        * examples:
129          * Dear ${people.map(_.name).mkString(", ")} how are you?
130
131    .slide
132      :markdown
133        # SSP also supports Velocity style tokens
134
135      :pygmentize
136        -----------------------------
137        ssp: example
138        -----------------------------
139        #if (lineItems.find(_.price > 10).isDefined)
140          <b>Welcome big spender!</b>
141        #end
142
143    .slide
144      :markdown
145        # SSP sample page
146        ### Sample page using SSP markup
147
148      !~~ pygmentizeUri("../scalate-example/src/main/webapp/tableSsp.ssp")
149
150    .slide
151      :markdown
152        # Scaml
153
154        * Scaml is a Scala port of HAML
155        * HAML started in the Rails world and became a very popular
156                  alternative to Erb templates
157        * whitespace sensitive (which is handy for markup, avoids
158                  badly nested markup)
159        * syntax
160            * %foo to indicate &lt;foo&gt;...&lt;/foo&gt;
161            * \- for statements
162            * = expressions
163
164    .slide
165      :markdown
166        # Scaml sample page
167        ### Sample page using Scaml markup
168
169      !~~ pygmentizeUri("../scalate-example/src/main/webapp/tableScaml.scaml")
170
171    .slide
172      :markdown
173        # Jade
174
175        * Jade came from JavaScript / Rails as a simpler more DRY
176                version of HAML / Scaml 
177          * avoid the % to indicate element name
178              * folks tend to use lots of elements; few are
179                        multi-line text content
180          * use | to indicate text content inside an element when
181                    multiple lines required
182          * Implemented as just a slightly different surface parser
183                    on Scaml
184        * Jade + markdown are the hotness!
185
186    .slide
187      :markdown
188        # Jade sample page
189        ### Sample page using Jade markup
190
191      !~~ pygmentizeUri("../scalate-example/src/main/webapp/tableJade.jade")
192      
193    .slide
194      :markdown
195        # Mustache
196
197        * no logic in the scripts 
198        * can be used from JavaScript on the client side or Scala /
199                Scalate on the server side
200        * uses {{foo}} mustaches for values
201        * use {{#foo}} and {{/foo}} for blocks/loops/conditionals
202        * good if you want your designer to own the templates
203          * though dynamically typed
204
205    .slide
206      :markdown
207        # Mustache sample page
208        ### Sample page using Mustache markup
209
210      !~~ pygmentizeUri("../scalate-example/src/main/webapp/tableMustache.mustache", "html")
211      
212    .slide
213      :markdown
214        # Scuery
215
216        * more of a HTML/XHTML transformation engine really
217        * uses CSS3 parser & transformation engine
218        * templates are regular HTML pages (possibly with mock data)
219                owned by your designer
220        * use the transform API (jQuery-ish) to transform the HTML to
221                inject/replace with dynamic data
222
223    .slide
224      :markdown
225        # Scuery sample HTML page
226        ### Sample page using plain HTML markup
227
228      !~~ pygmentizeUri("../scalate-example/src/main/webapp/tableScuery.html")
229
230    .slide
231      :markdown
232        # Scuery sample Scala transform
233        ### Sample HTML page transform with Scuery
234        
235      !~~ pygmentizeUri("../scalate-example/src/main/scala/MyTransform.scala")
236
237    .slide
238      :markdown
239        # Tips on picking a template language
240
241        * If you want your designers to own your templates
242          * consider **mustache** or **scuery**
243        * if you want developers to hack your templates
244          * want to generate HTML/XML really DRY? 
245              * use **jade**
246          * otherwise **SSP**
247
248    .slide
249      :markdown
250        # Scalate Layouts
251
252        * TemplateEngine.layoutStrategy defines the strategy
253        * default implementation uses the "layout" attribute to define
254                the template used for laying out any template
255        * to change the layout you want to use...
256          * \- attributes("layout") = "/my/layouts/foo.jade"
257        * to disable layouts
258          * \- attributes("layout") = ""
259  
260    .slide
261      :markdown
262        # Using Scalate
263
264        * can use TemplateEngine directly if doing code generation
265        * or if using servlets:
266
267      :pygmentize
268        -----------------------------
269        xml: add this to web.xml
270        -----------------------------
271        <filter>
272          <filter-name>TemplateEngineFilter</filter-name>
273          <filter-class>org.fusesource.scalate.servlet.TemplateEngineFilter</filter-class>
274        </filter>
275        <filter-mapping>
276          <filter-name>TemplateEngineFilter</filter-name>
277          <url-pattern>/*</url-pattern>
278        </filter-mapping>
279
280    .slide
281      :markdown
282        # Framework support
283
284        * bowler
285        * jersey
286        * lift
287        * playframework
288        * scalatra
289        * servlets
290        * sbt / lifty
291        * spring mvc
292        * unfiltered
293
294    .slide
295      :markdown
296        # mod your Template Engine!
297
298      :pygmentize
299        -----------------------------
300        scala: add this class to pimp your TemplateEngine
301        -----------------------------
302        package scalate 
303
304        import org.fusesource.scalate.TemplateEngine
305        import java.io.File
306
307        class Boot(engine: TemplateEngine) {
308
309          def run: Unit = {
310            // lets change the workingDirectory
311            engine.workingDirectory = new File("myScalateWorkDir")
312          }
313        }
314                
315    .slide
316      :markdown
317        # Precompile your templates
318
319      :pygmentize
320        -----------------------------
321        xml: add to your pom.xml
322        -----------------------------
323        <build>
324          <plugins>
325            <plugin>
326              <groupId>org.fusesource.scalate</groupId>
327              <artifactId>maven-scalate-plugin</artifactId>
328              <version>1.5.0</version>
329              <executions>
330                <execution>
331                  <goals>
332                    <goal>precompile</goal>
333                  </goals>
334                </execution>
335              </executions>
336            </plugin>
337          </plugins>
338        </build>
339                
340    .slide
341      :markdown
342        # Getting Started
343
344        * install Scalate
345          * [http://scalate.fusesource.org/download.html](http://scalate.fusesource.org/download.html)
346          * add **SCALATE_HOME/bin** to your **PATH**
347          
348      h3 Create a sample project
349      
350      :pygmentize
351        scalate create jersey mygroup myartifact
352        cd myartifact
353        mvn jetty:run
354        
355      h3 To try out the Scalate shell
356
357      :pygmentize
358        scalate
359        help
360
361    .slide
362      :markdown
363        # Static site generation
364
365        * maven plugin to generate a complete static website for your
366                project using Scalate
367        * deploy it to some web server using maven's wagon transports
368          * scp / webdav etc
369        * allows real time updates of templates & layouts while editing
370                docs
371        * your own personal offline wiki using git for source control &
372                versioning
373          * use a text editor to edit, erm, text files! :)
374
375      h3 Create a website project
376
377      :pygmentize
378        scalate create sitegen mygroup mysite
379        cd mysite
380        mvn jetty:run
381
382      :markdown
383        * now open [http://localhost:8080/scalate](http://localhost:8080/scalate)
384        * click on the top right scalate icon for the [Scalate Console](http://scalate.fusesource.org/documentation/console.html)
385
386    .slide
387      :markdown
388        # Presentation generation
389
390        * this presentation is created by Scalate :)
391        * deployed online [static HTML](http://scalate.fusesource.org/presentations/scalate)
392        * implemented in a [single jade + markdown template](https://github.com/scalate/scalate/blob/master/samples/scalate-presentation/src/scalate.jade)
393        * uses [HTML Slidy](http://www.w3.org/Talks/Tools/Slidy2/) for JavaScript + CSS
394        
395        ### To try it out locally from a scalate checkout
396        
397      :pygmentize
398        cd samples/scalate-presentation
399        mvn jetty:run
400        
401      :markdown
402        * now open [http://localhost:8080/scalate](http://localhost:8080/scalate)
403
404    .slide
405      :markdown
406        # Demo time!
407
408        * Demo templates & web app here:
409        * [https://github.com/scalate/scalate/tree/master/samples/scalate-example](https://github.com/scalate/scalate/tree/master/samples/scalate-example)
410
411        ![Cross Fingers](images/cross-fingers.png)
412
413    .slide
414      :markdown
415        # Any Questions?
416
417        ![Scalate](images/scalate/project-logo.png)
418        
419        * [http://scalate.fusesource.org/](http://scalate.fusesource.org/)
420        * twitter: @jstrachan
421        * [http://fusesource.com](http://fusesource.com)
422        
423        ![Questions](images/questions.png)
424        
425