Frank: The Static Site Non-Framework

3,913 views

Published on

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,913
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide


































































  • Frank: The Static Site Non-Framework

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

    ×