Repensando Templates com Cryml. Dalton Pinto

Size: px

Start display at page:

Download "Repensando Templates com Cryml. Dalton Pinto"

Constance Jenkins
6 years ago
Views:

1 Repensando Templates com Cryml Dalton Pinto 1

2 Dalton Pinto 2

3 3

4 4

5 5

6 Motivação 6

7 # partial: _file_or_folder.html.erb <% if File.directory? file_or_folder %> <%= render partial: 'folder', object: file_or_folder %> <% Dir[File.join(file_or_folder, '*')].each do ff %> <%= render partial: 'file_or_folder', object: ff %> <% end %> <% else %> <%= render partial: 'file', object: file_or_folder %> <% end %> 7 * Rails 3.0

8 # partial: _file_or_folder.html.erb <% if File.directory? file_or_folder %> <%= render partial: 'folder', object: file_or_folder %> <% Dir[File.join(file_or_folder, '*')].each do ff %> <%= render partial: 'file_or_folder', object: ff %> <% end %> <% else %> <%= render partial: 'file', object: file_or_folder %> <% end %> 7 * Rails 3.0

9 # partial: _file_or_folder.html.erb <% if File.directory? file_or_folder %> <%= render partial: 'folder', object: file_or_folder %> <% Dir[File.join(file_or_folder, '*')].each do ff %> <%= render partial: 'file_or_folder', object: ff %> <% end %> <% else %> <%= render partial: 'file', object: file_or_folder %> <% end %> 7 * Rails 3.0

10 # partial: _file_or_folder.html.erb <% if File.directory? file_or_folder %> <%= render partial: 'folder', object: file_or_folder %> <% Dir[File.join(file_or_folder, '*')].each do ff %> <%= render partial: 'file_or_folder', object: ff %> <% end %> <% else %> <%= render partial: 'file', object: file_or_folder %> <% end %> 7 * Rails 3.0

11 # partial: _file_or_folder.html.erb <% if File.directory? file_or_folder %> <%= render partial: 'folder', object: file_or_folder %> <% Dir[File.join(file_or_folder, '*')].each do ff %> <%= render partial: 'file_or_folder', object: ff %> <% end %> <% else %> <%= render partial: 'file', object: file_or_folder %> <% end %> 7 * Rails 3.0

12 Demorava Muito! 8

13 Source-to-Source tmpl = Erubis::Eruby.new("2 + 3 = <%= %>") tmpl.src "_buf = ''; _buf << '2 + 3 = '; _buf << ( ).to_s; \n_buf.to_s\n" content = eval(tmpl.src) "2 + 3 = 5" 9

14 Source-to-Source tmpl = Erubis::Eruby.new("2 + 3 = <%= %>") tmpl.src "_buf = ''; _buf << '2 + 3 = '; _buf << ( ).to_s; \n_buf.to_s\n" content = eval(tmpl.src) "2 + 3 = 5" 9

15 Source-to-Source tmpl = Erubis::Eruby.new("2 + 3 = <%= %>") tmpl.src "_buf = ''; _buf << '2 + 3 = '; _buf << ( ).to_s; \n_buf.to_s\n" content = eval(tmpl.src) "2 + 3 = 5" 9

16 E dai? 10

17 10 Elementos Iniciais 10 Níveis Binários

18 12

19 Parsings! 12

20 Calma! 13

21 O Rails > 3.1 cacheia partial rendering 14

22 Recursão é um conceito mais próximo de linguagens de programação do que de markup 15

23 Fill in the s 16

24 17

25 Dryml 18

26 Taglibs 19

27 <def tag="hello"> Hello World </def> <hello/> Hello World 20

28 21

29 22

30 23

31 Para de reclamar! Faz uma implementação em C e chama de Cryml! 24

32 25

33 ERB Necessário <def tag="my_name" attrs="first_name, last_name"> <p>my name is <%= first_name %> <%= last_name %></p> </def> <my_name first_name="dalton" last_name="pinto"/> <p>my name is Dalton Pinto</p> 26

34 Sintaxe Ambígua <body bgcolor="#aaaaaa">... </body> 27

35 E conteúdo CDATA? 28

36 Cryml 29

37 30

38 Abandonar LibXML 31

39 Estruturas de Dados Básicas Próprias 32

40 Gramática Própria 33

41 Encapsulamento de Dados Externos 34

42 35

43 Exemplos 36

44 Twitter Nav Bar <div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#">title</a> <ul class="nav"> <li class="active"><a href="#">home</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> </div> 37

45 ...com Cryml <nav_bar> <brand href="#">title</brand> <nav> <nav_item href="#" active>home</nav_item> <nav_item href="#">link</nav_item> <nav_item href="#">link</nav_item> </nav> </nav_bar> 38

46 Slider com JQuery UI <script> $(function() { $( "#slider" ).slider(); }); </script> <div class="demo"> <div id="slider"></div> </div> 39

47 ... overloading input <input id="slider" type="jquery-ui/slider" class="demo"/> 40

48 Fallbacks HTML 5 <video> <canvas>

49 Attribute Tags <div *path=users_path() <a Usuário: <a </div> 42

50 Data Tags <$current_user name/> <put text={ $current_user.name }/> 43

51 Condicionais <% %> %> logged <% else %> <a href="<%= sign_in_path %>">Sign In</a> <% end %> <ul> do friend %> <li><%= friend %> <% %> <a href="<%= create_friendship_path friend %>"> Add <%= friend %> as friend </a> <% end %> </li> <% end %> </ul> 44

52 Condicionais <% %> %> logged <% else %> <a href="<%= sign_in_path %>">Sign In</a> <% end %> <ul> do friend %> <li><%= friend %> <% %> <a href="<%= create_friendship_path friend %>"> Add <%= friend %> as friend </a> <% end %> </li> <% end %> </ul> 44

53 Condicionais <% %> %> logged <% else %> <a href="<%= sign_in_path %>">Sign In</a> <% end %> <ul> do friend %> <li><%= friend %> <% %> <a href="<%= create_friendship_path friend %>"> Add <%= friend %> as friend </a> <% end %> </li> <% end %> </ul> 44

54 ... com Cryml <if is=$current_user> <then put={$current_user.name}/> logged <else><a href=sign_in_path()>sign In</a></else> <ul> <each attr=['friend'] in=$friends> <li> <then> <a Add as friend </a> </then> </li> </each> </ul> </if> 45

55 ... com Cryml <if is=$current_user> <then put={$current_user.name}/> logged <else><a href=sign_in_path()>sign In</a></else> <ul> <each attr=['friend'] in=$friends> <li> <then> <a Add as friend </a> </then> </li> </each> </ul> </if> 45

56 ... com Cryml <if is=$current_user> <then put={$current_user.name}/> logged <else><a href=sign_in_path()>sign In</a></else> <ul> <each attr=['friend'] in=$friends> <li> <then> <a Add as friend </a> </then> </li> </each> </ul> </if> 45

57 ... com Cryml <if is=$current_user> <then put={$current_user.name}/> logged <else><a href=sign_in_path()>sign In</a></else> <ul> <each attr=['friend'] in=$friends> <li> <then> <a Add as friend </a> </then> </li> </each> </ul> </if> 45

58 ... com Cryml <if is=$current_user> <then put={$current_user.name}/> logged <else><a href=sign_in_path()>sign In</a></else> <ul> <each attr=['friend'] in=$friends> <li> <then> <a Add as friend </a> </then> </li> </each> </ul> </if> 45

59 Integração com Linguagens de Programação 46

60 "double quoted str {expr}" $dado 'single quoted str' funcao(1, 2, 3) true, false, scope{... } [1,2,3] {... } {'key': "value"} 4 + 2, 10 > 2,... 47

61 Expressões attr=42+$ext.method(3) 48

62 attr + 42 EXPR_METHOD $ext method 1 49

63 Streaming 50

64 ... yield :javascripts content_for :javascripts... 51

65 ... yield :javascripts provide :javascripts... 52

66 ... <content for='javascripts'/> <*content for='javascripts'>... </content>... 53

67 ... <content for='javascript'>... <*content for='javascripts'/>... 54

68 Futuro 55

69 Rendering nas Views View Model Controller Browser Server 56

70 Tags e Funções em JS Rubyracer ExecJS... 57

71 Rendering Paralelo Food for thought... 58

72 59

73 Dúvidas? 60

WEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310

WEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310 Project #4 Updating your class project to be more mobile friendly To gain a fuller appreciate for Responsive Design, please review Chapter 8. Another great