Your SlideShare is downloading. ×
Frank: The Static Site Non-Framework
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Frank: The Static Site Non-Framework

3,584
views

Published on

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.

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,584
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide


































































  • Transcript

    • 1. FRANK
    • 2. blahed.com
    • 3. blahed.com
    • 4. blahed.com software developer @ medium
    • 5. medium
    • 6. medium we build a lot of websites
    • 7. departmentalized workflow
    • 8. departmentalized workflow -design
    • 9. departmentalized workflow -design -front end
    • 10. departmentalized workflow -design -front end -server side
    • 11. static builds are part of our workflow
    • 12. everyone was using something different
    • 13. everyone was using something different -django
    • 14. everyone was using something different -django -sinatra
    • 15. everyone was using something different -django -sinatra -static html
    • 16. the product is always html/css/js
    • 17. the product is always html/css/js and we wanted to produce it better, faster, and easier
    • 18. the gauntlet has been laid
    • 19. FRANK RubyGem
    • 20. FRANK RubyGem
    • 21. What is this frank?
    • 22. What is this frank? static site builder/rapid prototyper
    • 23. What is this frank? static site builder/rapid prototyper not a framework
    • 24. Why is this frank?
    • 25. Why is this frank? -build a lot of websites
    • 26. Why is this frank? -build a lot of websites -a framework isn’t always the best solution
    • 27. Why is this frank? -build a lot of websites -a framework isn’t always the best solution -no routing
    • 28. Why is this frank? -build a lot of websites -a framework isn’t always the best solution -no routing -websites are html/js/css
    • 29. 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
    • 30. How is this frank?
    • 31. How is this frank? -use tilt and rack
    • 32. How is this frank? -use tilt and rack -hook it all together
    • 33. How is this frank? -use tilt and rack -hook it all together -add a little ruby magic
    • 34. Frameworks
    • 35. Frameworks -changed the way we develop
    • 36. Frameworks -changed the way we develop -great for webapps
    • 37. Frameworks -changed the way we develop -great for webapps -layouts and sharing of code
    • 38. Frameworks -changed the way we develop -great for webapps -layouts and sharing of code -haml, sass, less, coffeescript, etc
    • 39. frameworks are too much...
    • 40. frameworks are too much... -when you don’t have a complicated app
    • 41. frameworks are too much... -when you don’t have a complicated app -when you want to keep it simple
    • 42. 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
    • 43. 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
    • 44. so what do we usually do...
    • 45. so what do we usually do... use a framework anyway
    • 46. so what do we usually do... use a framework anyway well...
    • 47. so what do we usually do... use a framework anyway well... NO MORE!!!
    • 48. frank is a non-framework with some framework like features
    • 49. frank is a non-framework with some framework like features -templating languages
    • 50. frank is a non-framework with some framework like features -templating languages -named layout support
    • 51. frank is a non-framework with some framework like features -templating languages -named layout support -partials/includes
    • 52. frank is a non-framework with some framework like features -templating languages -named layout support -partials/includes -custom helper methods
    • 53. frank is a non-framework with some framework like features -templating languages -named layout support -partials/includes -custom helper methods -lorem text helpers
    • 54. 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
    • 55. 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>
    • 56. haml #profile .left.column #date= print_date #address= current_user.address .right.column #email= current_user.email #bio= current_user.bio
    • 57. 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
    • 58. 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
    • 59. lorem images lorem.image(width, height, true)
    • 60. lorem images
    • 61. lorem images
    • 62. lorem images
    • 63. lorem images
    • 64. Getting started
    • 65. Getting started $ frank projectx
    • 66. Getting started $ frank projectx ----------------------- Frank: - Creating 'projectx' - Copying Frank template Congratulations, 'projectx' is ready to go.
    • 67. Getting started $ frank projectx ----------------------- Frank: - Creating 'projectx' - Copying Frank template Congratulations, 'projectx' is ready to go. $ ls projectx
    • 68. Getting started $ frank projectx ----------------------- Frank: - Creating 'projectx' - Copying Frank template Congratulations, 'projectx' is ready to go. $ ls projectx . .. dynamic/ helpers.rb settings.yml static/
    • 69. dynamic folder contains templates and layouts that will dynamically be compiled to html/js/css
    • 70. 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
    • 71. static folder contains static assets that will be rendered before the dynamic layer is hit
    • 72. static folder contains static assets that will be rendered before the dynamic layer is hit html, css, js, images, swf, files, etc
    • 73. helpers.rb your custom ruby helpers that are available for use in dynamic templates
    • 74. helpers.rb your custom ruby helpers that are available for use in dynamic templates def this_helper(str) “returns this string” end
    • 75. settings.yml contains settings for rack, folder names, and layouts
    • 76. 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]
    • 77. basically...
    • 78. basically... you request: http://localhost:3601/thispage
    • 79. basically... you request: http://localhost:3601/thispage frank looks for: projectx/static/thispage/index.html
    • 80. basically... you request: http://localhost:3601/thispage frank looks for: projectx/static/thispage/index.html then looks for: projectx/dynamic/thispage.*
    • 81. demo
    • 82. questions? the gill sans question mark looks funny...
    • 83. blahed.com http://github.com/blahed/frank clap now

    ×