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

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

17. the product is always html/css/js

18. the product is always html/css/js
and we wanted to produce it
better, faster, and easier

19. the gauntlet has been laid

22. FRANK
RubyGem

23. FRANK
RubyGem

24. What is this frank?

25. What is this frank?
static site builder/rapid prototyper

26. What is this frank?
static site builder/rapid prototyper
not a framework

27. Why is this frank?

28. Why is this frank?
-build a lot of websites

29. Why is this frank?
-build a lot of websites
-a framework isn’t always the best solution

30. Why is this frank?
-build a lot of websites
-a framework isn’t always the best solution
-no routing

31. Why is this frank?
-build a lot of websites
-a framework isn’t always the best solution
-no routing
-websites are html/js/css

32. 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

33. How is this frank?

34. How is this frank?
-use tilt and rack

35. How is this frank?
-use tilt and rack
-hook it all together

36. How is this frank?
-use tilt and rack
-hook it all together
-add a little ruby magic

37. Frameworks

38. Frameworks
-changed the way we develop

39. Frameworks
-changed the way we develop
-great for webapps

40. Frameworks
-changed the way we develop
-great for webapps
-layouts and sharing of code

41. Frameworks
-changed the way we develop
-great for webapps
-layouts and sharing of code
-haml, sass, less, coffeescript, etc

42. frameworks are too much...

43. frameworks are too much...
-when you don’t have a complicated app

44. frameworks are too much...
-when you don’t have a complicated app
-when you want to keep it simple

45. 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

46. 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

47. so what do we usually do...

48. so what do we usually do...
use a framework anyway

49. so what do we usually do...
use a framework anyway
well...

50. so what do we usually do...
use a framework anyway
well...
NO MORE!!!

51. frank is a non-framework
with some framework like
features

52. frank is a non-framework
with some framework like
features
-templating languages

53. frank is a non-framework
with some framework like
features
-templating languages
-named layout support

54. frank is a non-framework
with some framework like
features
-templating languages
-named layout support
-partials/includes

55. frank is a non-framework
with some framework like
features
-templating languages
-named layout support
-partials/includes
-custom helper methods

56. frank is a non-framework
with some framework like
features
-templating languages
-named layout support
-partials/includes
-custom helper methods
-lorem text helpers

57. 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

58. 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>

59. haml
#profile
.left.column
#date= print_date
#address= current_user.address
.right.column
#email= current_user.email
#bio= current_user.bio

60. 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

61. 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

62. lorem images
lorem.image(width, height, true)

63. lorem images

64. lorem images

65. lorem images

66. lorem images

67. Getting started

68. Getting started
$ frank projectx

69. Getting started
$ frank projectx
-----------------------
Frank:
- Creating 'projectx'
- Copying Frank template
Congratulations, 'projectx' is ready to go.

70. Getting started
$ frank projectx
-----------------------
Frank:
- Creating 'projectx'
- Copying Frank template
Congratulations, 'projectx' is ready to go.
$ ls projectx

71. Getting started
$ frank projectx
-----------------------
Frank:
- Creating 'projectx'
- Copying Frank template
Congratulations, 'projectx' is ready to go.
$ ls projectx
. .. dynamic/ helpers.rb settings.yml static/

72. dynamic folder
contains templates and layouts that will
dynamically be compiled to html/js/css

73. 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

74. static folder
contains static assets that will be
rendered before the dynamic layer is hit

75. static folder
contains static assets that will be
rendered before the dynamic layer is hit
html, css, js, images, swf, files, etc

76. helpers.rb
your custom ruby helpers that are
available for use in dynamic templates

77. helpers.rb
your custom ruby helpers that are
available for use in dynamic templates
def this_helper(str)
“returns this string”
end

78. settings.yml
contains settings for rack, folder names,
and layouts

79. 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]

80. basically...

81. basically...
you request:
http://localhost:3601/thispage

82. basically...
you request:
http://localhost:3601/thispage
frank looks for:
projectx/static/thispage/index.html

83. basically...
you request:
http://localhost:3601/thispage
frank looks for:
projectx/static/thispage/index.html
then looks for:
projectx/dynamic/thispage.*

84. demo

85. questions?
the gill sans question mark looks funny...

86. blahed.com
http://github.com/blahed/frank
clap now