• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Frank: The Static Site Non-Framework
 

Frank: The Static Site Non-Framework

on

  • 4,418 views

My talk about the static-website/prototyping rubygem, Frank. From the hugely successful http://devchatt.org conference.

My talk about the static-website/prototyping rubygem, Frank. From the hugely successful http://devchatt.org conference.

Statistics

Views

Total Views
4,418
Views on SlideShare
4,394
Embed Views
24

Actions

Likes
2
Downloads
0
Comments
0

1 Embed 24

http://www.slideshare.net 24

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Frank: The Static Site Non-Framework Frank: The Static Site Non-Framework Presentation Transcript

  • FRANK
  • blahed.com
  • blahed.com
  • blahed.com software developer @ medium
  • medium
  • medium we build a lot of websites
  • departmentalized workflow
  • departmentalized workflow -design
  • departmentalized workflow -design -front end
  • departmentalized workflow -design -front end -server side
  • static builds are part of our workflow
  • everyone was using something different
  • everyone was using something different -django
  • everyone was using something different -django -sinatra
  • everyone was using something different -django -sinatra -static html
  • the product is always html/css/js
  • the product is always html/css/js and we wanted to produce it better, faster, and easier
  • the gauntlet has been laid
  • FRANK RubyGem
  • FRANK RubyGem
  • What is this frank?
  • What is this frank? static site builder/rapid prototyper
  • What is this frank? static site builder/rapid prototyper not a framework
  • Why is this frank?
  • Why is this frank? -build a lot of websites
  • Why is this frank? -build a lot of websites -a framework isn’t always the best solution
  • Why is this frank? -build a lot of websites -a framework isn’t always the best solution -no routing
  • Why is this frank? -build a lot of websites -a framework isn’t always the best solution -no routing -websites are html/js/css
  • Why is this frank? -build a lot of websites -a framework isn’t always the best solution -no routing -websites are html/js/css -there are good solutions for creating html/js/css
  • How is this frank?
  • How is this frank? -use tilt and rack
  • How is this frank? -use tilt and rack -hook it all together
  • How is this frank? -use tilt and rack -hook it all together -add a little ruby magic
  • Frameworks
  • Frameworks -changed the way we develop
  • Frameworks -changed the way we develop -great for webapps
  • Frameworks -changed the way we develop -great for webapps -layouts and sharing of code
  • Frameworks -changed the way we develop -great for webapps -layouts and sharing of code -haml, sass, less, coffeescript, etc
  • frameworks are too much...
  • frameworks are too much... -when you don’t have a complicated app
  • frameworks are too much... -when you don’t have a complicated app -when you want to keep it simple
  • frameworks are too much... -when you don’t have a complicated app -when you want to keep it simple -when you need to quickly prototype
  • frameworks are too much... -when you don’t have a complicated app -when you want to keep it simple -when you need to quickly prototype -when you don’t need a framework
  • so what do we usually do...
  • so what do we usually do... use a framework anyway
  • so what do we usually do... use a framework anyway well...
  • so what do we usually do... use a framework anyway well... NO MORE!!!
  • frank is a non-framework with some framework like features
  • frank is a non-framework with some framework like features -templating languages
  • frank is a non-framework with some framework like features -templating languages -named layout support
  • frank is a non-framework with some framework like features -templating languages -named layout support -partials/includes
  • frank is a non-framework with some framework like features -templating languages -named layout support -partials/includes -custom helper methods
  • frank is a non-framework with some framework like features -templating languages -named layout support -partials/includes -custom helper methods -lorem text helpers
  • frank is a non-framework with some framework like features -templating languages -named layout support -partials/includes -custom helper methods -lorem text helpers -lorem image helpers
  • erb <div id="profile"> <div class="left column"> <div id="date"><%= print_date %></div> <div id="address"><%= current_user.address %></div> </div> <div class="right column"> <div id="email"><%= current_user.email %></div> <div id="bio"><%= current_user.bio %></div> </div> </div>
  • haml #profile .left.column #date= print_date #address= current_user.address .right.column #email= current_user.email #bio= current_user.bio
  • choices... <div id="profile"> <div class="left column"> <div id="date"><%= print_date %></div> <div id="address"><%= current_user.address %></div> </div> <div class="right column"> <div id="email"><%= current_user.email %></div> <div id="bio"><%= current_user.bio %></div> </div> </div> #profile .left.column #date= print_date #address= current_user.address .right.column #email= current_user.email #bio= current_user.bio
  • lorem text lorem.sentence lorem.date lorem.words(5) lorem.name lorem.word lorem.first_name lorem.paragraphs(10) lorem.last_name lorem.paragraph lorem.email
  • lorem images lorem.image(width, height, true)
  • lorem images
  • lorem images
  • lorem images
  • lorem images
  • Getting started
  • Getting started $ frank projectx
  • Getting started $ frank projectx ----------------------- Frank: - Creating 'projectx' - Copying Frank template Congratulations, 'projectx' is ready to go.
  • Getting started $ frank projectx ----------------------- Frank: - Creating 'projectx' - Copying Frank template Congratulations, 'projectx' is ready to go. $ ls projectx
  • Getting started $ frank projectx ----------------------- Frank: - Creating 'projectx' - Copying Frank template Congratulations, 'projectx' is ready to go. $ ls projectx . .. dynamic/ helpers.rb settings.yml static/
  • dynamic folder contains templates and layouts that will dynamically be compiled to html/js/css
  • dynamic folder contains templates and layouts that will dynamically be compiled to html/js/css erb, haml, sass, less, builder, liquid, mustache, markdown, textile, and coffeescript
  • static folder contains static assets that will be rendered before the dynamic layer is hit
  • static folder contains static assets that will be rendered before the dynamic layer is hit html, css, js, images, swf, files, etc
  • helpers.rb your custom ruby helpers that are available for use in dynamic templates
  • helpers.rb your custom ruby helpers that are available for use in dynamic templates def this_helper(str) “returns this string” end
  • settings.yml contains settings for rack, folder names, and layouts
  • settings.yml contains settings for rack, folder names, and layouts # Templates: # # 'layouts' is a list of layouts to use, where # 'name' is the filename (without extension). # You can also use multiple layouts, and limit # their scopes like so: # - name: blog_layout # only: [blog] # - name: normal # not: [blog, ajax]
  • basically...
  • basically... you request: http://localhost:3601/thispage
  • basically... you request: http://localhost:3601/thispage frank looks for: projectx/static/thispage/index.html
  • basically... you request: http://localhost:3601/thispage frank looks for: projectx/static/thispage/index.html then looks for: projectx/dynamic/thispage.*
  • demo
  • questions? the gill sans question mark looks funny...
  • blahed.com http://github.com/blahed/frank clap now