Introduction into Harp

D5cd900453405c985e97c63e9f92061d?s=47 Alexander Reelsen
December 04, 2014
Technology
1
150

Introduction into Harp

A quick introduction into harp. Hold at the MNUG Meetup in Munich in December 2014

D5cd900453405c985e97c63e9f92061d?s=128

Alexander Reelsen

December 04, 2014
Tweet

Want more?

D5cd900453405c985e97c63e9f92061d?s=48 spinscale
0
51
D5cd900453405c985e97c63e9f92061d?s=48 spinscale
0
190
D5cd900453405c985e97c63e9f92061d?s=48 spinscale
0
54
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
3
760
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
14
890
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
6
490
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
310
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
8
640
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
9
330
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
370
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
5
920
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
240

Transcript

  1. 1.

    Alexander Reelsen @spinscale alexander.reelsen@elasticsearch.com Introduction into harp

  2. 2.

    About me Developer at Elasticsearch Interested in all things scale,

    search & a bit web No clue about web design likes tech meetups...
  3. 3.

    More search... Check out the Search Meetup Munich (15th Dec)

    http://www.meetup.com/Search-Meetup-Munich/events/218856224/
  4. 4.

    Devcamp anyone? Like a barcamp, but for developers only! Location

    for 150 people One big room 5 small conference rooms Sponsors wanted as well Contact me!
  5. 5.

    Introduction

  6. 6.

    Static site generators There are a few out there... 388

    https://staticsitegenerators.net/ Known ones Jekyll, Octopress, Pelican, Middleman
  7. 7.

    Use-Cases Prototyping Documentation Small websites Blogs Potentially replacing misused CMS

  8. 8.

    harp static web server with built-in preprocessing HTML: EJS, Jade,

    Markdown CSS: LESS, Stylus, SASS JS: Coffeescript
  9. 9.

    Installation npm install -g harp harp init myproject harp server

    myproject
  10. 10.

    Features

  11. 11.

    Command line options harp compile creates compiled HTML/CSS/JS for static

    hosting harp multihost allows to develop multiple projects in parallel
  12. 12.

    Features - Partials <!-- _nav.ejs --> <nav> <a href="#">Home</a> <a

    href="#">Product</a> <a href="#">Services</a> </nav> <!-- index.ejs --> <body> <%= partial("_nav") %> <h1>Services</h1> <!-- etc. --> </body>
  13. 13.

    Features - Metadata { "team": { "title": "Team page", "members":

    ["Rob", “Brock", "Jorge"] } } h1= title ul each member in members li= member _data.json team.jade
  14. 14.

    Integration - express.js var express = require("express"); var harp =

    require("harp"); var app = express(); app.configure(function(){ app.use(express.static(__dirname + "/public")); app.use(harp.mount(__dirname + "/public")); });
  15. 15.

    Features - Boilerplates harp init -b harp-boilerplates/hb-blog Blog, Bootstrap, Presentations...

    https://github.com/harp-boilerplates
  16. 16.

    Features - Environment Act different depending on your environment production

    || development Display drafts etc.. Different caching strategy (LRU vs. none) harp compile is production as well!
  17. 17.

    Features - Deployment GitHub Pages Heroku Azure harp.io

  18. 18.

    Features... Support for globals.json current object for application state Basic

    Auth Custom 404, 200 (for client apps) More help through recipes http://harpjs.com/recipes/
  19. 19.

    Not (yet) implemented... browser-sync https://github.com/sintaxi/harp/pull/360 terraform needs to be updated

    more regularly lots of pending PRs with support for other languages Big picture: Harp editor https://github.com/silentrob/harp-editor
  20. 20.

    DEMO

  21. 21.

    Resources Harp http://harpjs.com/ https://github.com/sintaxi/harp Harp Platform https://www.harp.io/ Note: No affiliation

    with harp just stole the design!
  22. 22.

    Thanks for listening! Alexander Reelsen @spinscale alexander.reelsen@elasticsearch.com