Haml. New HTML? (RU)

Kirill Zonov
Kirill ZonovSenior Software Engineer
Why HAML?




Kirill Zonov (graffzon)
From ERB to Haml (Step 1)
<div class="offering">
  <div class="name">
     <%= offering.name %>
  </div>
  <div class="symbol">
     <%= offering.symbol %>
  </div>
  <div class="last_price">
     <%= number_to_currency offering.last_price %>
  </div>
  <div class="last_traded_at">
     <%= last_trade_at.to_formatted_s(:short) %>
  </div>
  <div class="actions">
     <%= link_to "buy", offering_new_bid_path(offering) %>
     <% if offering.owners.find_by_user_id(session[:uid]) %>
       <%= link_to "sell", offering_new_ask_path(offering) %>
     <% end %>
  </div>
</div>
From ERB to Haml (Step 2)

<div class="offering">
  <div class="name">
     <%= offering.name %>
  <div class="symbol">
     <%= offering.symbol %>
  <div class="last_price">
     <%= number_to_currency offering.last_price %>
  <div class="last_traded_at">
     <%= last_trade_at.to_formatted_s(:short) %>
  <div class="actions">
     <%= link_to "buy", offering_new_bid_path(offering) %>
     <% if offering.owners.find_by_user_id(session[:uid]) %>
       <%= link_to "sell", offering_new_ask_path(offering) %>
From ERB to Haml (Step 3)

.offering
   .name
       = offering.name
    .symbol
       = offering.symbol
    .last_price
       = number_to_currency offering.last_price
    .last_traded_at
       = last_trade_at.to_formatted_s(:short)
    .actions
       = link_to "buy", offering_new_bid_path(offering)
       - if offering.owners.find_by_user_id(session[:uid])
          = link_to "sell", offering_new_ask_path(offering)
Main ideas of Haml

               Markup should:



● be beautiful
● be clean
● be sensible
● follow the rules
Rules of indentations

.some_div
  line one
  line two                <div class='some_div'> line one line two </div> <div
                          class='some_div_two'> line one </div>
.some_div_two             line two
  line one
line two



If we try that:
%h1 test
work?
(<h1> test
         work? </h1> )

Immediately we take error:
Illegal nesting: content can't be both given on the same line as %h1 and nested within it.
Size of code (erb)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>
      <%= configatron.app_name %> - <%= yield(:title) || 'Home' %>
   </title>
   <%= stylesheet_link_tag :flutie, 'application' %>
   <%= javascript_include_tag :defaults, 'rails.validations', 'jquery-snippet' %>
   <%= csrf_meta_tag %>
   <%= yield(:head) %>
   <%= yield :javascript %>
 </head>
<body>
   <div class="content">
   <%= render 'layouts/navigation' %>
   <hr />
   <%= render 'layouts/messages' %>
   <% if show_title? %>
      <h1>
         <%= yield(:title) %>
      </h1>
   <% end %>
   <%= yield %>
   </div>
</body>
</html>
Size of code (haml)


!!!
%html
  %head
  %meta{'http-equiv' => "Content-Type", 'content' => "text/html; charset=utf-8"}
  %title #{configatron.app_name} - #{yield(:title) || 'Home'}
  = stylesheet_link_tag :flutie, 'application'
  = javascript_include_tag :defaults, 'rails.validations', 'jquery-snippet'
  = csrf_meta_tag
  = yield(:head)
  = yield :javascript
%body .content
  = render 'layouts/navigation'
  %hr = render 'layouts/messages'
  %h1=yield(:title)
  if show_title?
    = yield
No need for words ;)
Any problems with haml?




● Perfomance problems
● Need for retraining
Perfomance

   Haml - 0.00033s
   ERB - 0.000222s
   Slim - 0.000254s
   Код:


Haml                                   ERB                                           Slim
%h1 Haml#index %p Find me in           <h1>Erb#index</h1> <p>Find me in              h1 Haml#index p Find me in
app/views/haml/index.html.erb =@haml   app/views/erb/index.html.erb</p> <%= @erb %   app/views/slim/index.html.erb = @slim
                                       >
Intuitive perception

Html with css:
<div class="highlight">
  this is some stuff
</div>
.highlight {
 border: 1px solid #f00 }

Haml with sass:
.highlight
  this is some stuff

.highlight
 border: 1px solid #f00
Now you can see that Haml is
          REALLY better than erb



You also can take a look for my blog graffzon.com
1 of 13

Recommended

Haml in 5 minutes by
Haml in 5 minutesHaml in 5 minutes
Haml in 5 minutescameronbot
8.8K views18 slides
Introduction to HAML by
Introduction to HAMLIntroduction to HAML
Introduction to HAMLJon Dean
11.7K views20 slides
Introduction to HAML by
Introduction to HAMLIntroduction to HAML
Introduction to HAMLZohar Arad
2.8K views27 slides
HTML 5 Simple Tutorial Part 3 by
HTML 5 Simple Tutorial Part 3HTML 5 Simple Tutorial Part 3
HTML 5 Simple Tutorial Part 3Sanjeev Kumar
155 views17 slides
Haml And Sass by
Haml And SassHaml And Sass
Haml And Sasswear
1.5K views21 slides
HTML 5 Simple Tutorial Part 4 by
HTML 5 Simple Tutorial Part 4HTML 5 Simple Tutorial Part 4
HTML 5 Simple Tutorial Part 4Sanjeev Kumar
128 views19 slides

More Related Content

What's hot

9. lower in Symfony 4 by
9. lower in Symfony 49. lower in Symfony 4
9. lower in Symfony 4Razvan Raducanu, PhD
123 views7 slides
HTML 5 Basics Part One by
HTML 5 Basics Part OneHTML 5 Basics Part One
HTML 5 Basics Part OneM Ashraful Islam Jewel
84 views25 slides
Java script by
Java scriptJava script
Java scriptSanjay Gunjal
54 views36 slides
Styling with CSS by
Styling with CSSStyling with CSS
Styling with CSSMike Crabb
1.3K views53 slides
jQuery from the very beginning by
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginningAnis Ahmad
11.8K views73 slides
What's new in Rails 2? by
What's new in Rails 2?What's new in Rails 2?
What's new in Rails 2?brynary
6.8K views61 slides

What's hot(19)

Styling with CSS by Mike Crabb
Styling with CSSStyling with CSS
Styling with CSS
Mike Crabb1.3K views
jQuery from the very beginning by Anis Ahmad
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
Anis Ahmad11.8K views
What's new in Rails 2? by brynary
What's new in Rails 2?What's new in Rails 2?
What's new in Rails 2?
brynary6.8K views
Simple Markdown with Ecto and Protocols by David Lucia
Simple Markdown with Ecto and ProtocolsSimple Markdown with Ecto and Protocols
Simple Markdown with Ecto and Protocols
David Lucia263 views
Build a game with javascript (may 21 atlanta) by Thinkful
Build a game with javascript (may 21 atlanta)Build a game with javascript (may 21 atlanta)
Build a game with javascript (may 21 atlanta)
Thinkful209 views
Mechanize at the Ruby Drink-up of Sophia, November 2011 by rivierarb
Mechanize at the Ruby Drink-up of Sophia, November 2011Mechanize at the Ruby Drink-up of Sophia, November 2011
Mechanize at the Ruby Drink-up of Sophia, November 2011
rivierarb2.4K views
Upstate CSCI 450 WebDev Chapter 2 by DanWooster1
Upstate CSCI 450 WebDev Chapter 2Upstate CSCI 450 WebDev Chapter 2
Upstate CSCI 450 WebDev Chapter 2
DanWooster199 views
Story Driven Development With Cucumber by Sean Cribbs
Story Driven Development With CucumberStory Driven Development With Cucumber
Story Driven Development With Cucumber
Sean Cribbs6K views
JavaScript: Ajax & DOM Manipulation by borkweb
JavaScript: Ajax & DOM ManipulationJavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM Manipulation
borkweb8.9K views
Coder Presentation by Doug Green
Coder  PresentationCoder  Presentation
Coder Presentation
Doug Green748 views
URUG Ruby on Rails Workshop - Sesssion 5 by jakemallory
URUG Ruby on Rails Workshop - Sesssion 5URUG Ruby on Rails Workshop - Sesssion 5
URUG Ruby on Rails Workshop - Sesssion 5
jakemallory525 views

Viewers also liked

Facebook for public health - NPIN by
Facebook for public health - NPINFacebook for public health - NPIN
Facebook for public health - NPINGiuseppe Fattori
2.7K views25 slides
2.tao of topic maps by
2.tao of topic maps2.tao of topic maps
2.tao of topic mapsGabriel Hopmans
1.3K views33 slides
3.typing and advanced constructs by
3.typing and advanced constructs3.typing and advanced constructs
3.typing and advanced constructsGabriel Hopmans
493 views34 slides
Eurovegas by
EurovegasEurovegas
EurovegasMohamed Ajanif
196 views6 slides
MAN2012 by
MAN2012MAN2012
MAN2012lelouch1111
207 views7 slides
Columbia Corporate Strategy Retreat 03.14.12 by
Columbia Corporate Strategy Retreat 03.14.12Columbia Corporate Strategy Retreat 03.14.12
Columbia Corporate Strategy Retreat 03.14.12Mightybytes
489 views23 slides

Viewers also liked(20)

Facebook for public health - NPIN by Giuseppe Fattori
Facebook for public health - NPINFacebook for public health - NPIN
Facebook for public health - NPIN
Giuseppe Fattori2.7K views
3.typing and advanced constructs by Gabriel Hopmans
3.typing and advanced constructs3.typing and advanced constructs
3.typing and advanced constructs
Gabriel Hopmans493 views
Columbia Corporate Strategy Retreat 03.14.12 by Mightybytes
Columbia Corporate Strategy Retreat 03.14.12Columbia Corporate Strategy Retreat 03.14.12
Columbia Corporate Strategy Retreat 03.14.12
Mightybytes489 views
As media course work- evaluation by Billysmedia
As media course work- evaluationAs media course work- evaluation
As media course work- evaluation
Billysmedia233 views
Saa s案例分析01 by shaoshao11
Saa s案例分析01Saa s案例分析01
Saa s案例分析01
shaoshao11737 views
Arthur conan doyle2 by ian11644
Arthur conan doyle2Arthur conan doyle2
Arthur conan doyle2
ian11644306 views
Distribution of Silicon iin the Allumiinum Matriix for Rear Passiivated Solla... by Elías Urrejola
Distribution of Silicon iin the Allumiinum Matriix for Rear Passiivated Solla...Distribution of Silicon iin the Allumiinum Matriix for Rear Passiivated Solla...
Distribution of Silicon iin the Allumiinum Matriix for Rear Passiivated Solla...
Elías Urrejola607 views
As media course work- evaluation by Billysmedia
As media course work- evaluationAs media course work- evaluation
As media course work- evaluation
Billysmedia257 views
20121204 are your lights on? by jasonmel
20121204 are your lights on?20121204 are your lights on?
20121204 are your lights on?
jasonmel762 views
Arthur conan doyle2 by ian11644
Arthur conan doyle2Arthur conan doyle2
Arthur conan doyle2
ian11644373 views
Ec tech heritage buildings 11_mn01 by Frost & Sullivan
Ec tech heritage buildings 11_mn01Ec tech heritage buildings 11_mn01
Ec tech heritage buildings 11_mn01
Frost & Sullivan1.7K views
Ragged school by michaelao5
Ragged schoolRagged school
Ragged school
michaelao5334 views
Backup and Security Lite WCPHX13 by Jeffrey Zinn
Backup and Security Lite WCPHX13Backup and Security Lite WCPHX13
Backup and Security Lite WCPHX13
Jeffrey Zinn1.2K views
Body parts by julested2
Body partsBody parts
Body parts
julested2300 views

Similar to Haml. New HTML? (RU)

AEM Sightly Template Language by
AEM Sightly Template LanguageAEM Sightly Template Language
AEM Sightly Template LanguageGabriel Walt
47.6K views65 slides
The Rails Way by
The Rails WayThe Rails Way
The Rails WayMichał Orman
3.2K views57 slides
Geek Moot '09 -- Smarty 101 by
Geek Moot '09 -- Smarty 101Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101Ted Kulp
2.2K views49 slides
Action View Form Helpers - 1, Season 2 by
Action View Form Helpers - 1, Season 2Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2RORLAB
848 views32 slides
Clean separation by
Clean separationClean separation
Clean separationatorreno
501 views49 slides
Html, CSS, Javascript, Jquery, Meteor應用 by
Html, CSS, Javascript, Jquery, Meteor應用Html, CSS, Javascript, Jquery, Meteor應用
Html, CSS, Javascript, Jquery, Meteor應用LearningTech
909 views37 slides

Similar to Haml. New HTML? (RU)(20)

AEM Sightly Template Language by Gabriel Walt
AEM Sightly Template LanguageAEM Sightly Template Language
AEM Sightly Template Language
Gabriel Walt47.6K views
Geek Moot '09 -- Smarty 101 by Ted Kulp
Geek Moot '09 -- Smarty 101Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101
Ted Kulp2.2K views
Action View Form Helpers - 1, Season 2 by RORLAB
Action View Form Helpers - 1, Season 2Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2
RORLAB848 views
Clean separation by atorreno
Clean separationClean separation
Clean separation
atorreno501 views
Html, CSS, Javascript, Jquery, Meteor應用 by LearningTech
Html, CSS, Javascript, Jquery, Meteor應用Html, CSS, Javascript, Jquery, Meteor應用
Html, CSS, Javascript, Jquery, Meteor應用
LearningTech909 views
OSDC 2009 Rails Turtorial by Yi-Ting Cheng
OSDC 2009 Rails TurtorialOSDC 2009 Rails Turtorial
OSDC 2009 Rails Turtorial
Yi-Ting Cheng977 views
RoR 101: Session 2 by Rory Gianni
RoR 101: Session 2RoR 101: Session 2
RoR 101: Session 2
Rory Gianni813 views
Documenting from the Trenches by Xavier Noria
Documenting from the TrenchesDocumenting from the Trenches
Documenting from the Trenches
Xavier Noria458 views
Introduction of Html/css/js by Knoldus Inc.
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.22.5K views
Rails antipattern-public by Chul Ju Hong
Rails antipattern-publicRails antipattern-public
Rails antipattern-public
Chul Ju Hong1.6K views
Rails for Beginners - Le Wagon by Alex Benoit
Rails for Beginners - Le WagonRails for Beginners - Le Wagon
Rails for Beginners - Le Wagon
Alex Benoit147 views
Building Potent WordPress Websites by Kyle Cearley
Building Potent WordPress WebsitesBuilding Potent WordPress Websites
Building Potent WordPress Websites
Kyle Cearley2.5K views
Ruby on Rails at PROMPT ISEL '11 by Pedro Cunha
Ruby on Rails at PROMPT ISEL '11Ruby on Rails at PROMPT ISEL '11
Ruby on Rails at PROMPT ISEL '11
Pedro Cunha1K views
Angular.js Fundamentals by Mark
Angular.js FundamentalsAngular.js Fundamentals
Angular.js Fundamentals
Mark 2.1K views
AngularJS vs. Ember.js vs. Backbone.js by Mark
AngularJS vs. Ember.js vs. Backbone.jsAngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.js
Mark 2.9K views

More from Kirill Zonov

AWS X-Ray introduction and my experience by
AWS X-Ray introduction and my experienceAWS X-Ray introduction and my experience
AWS X-Ray introduction and my experienceKirill Zonov
203 views44 slides
Kubernetes and Helm 101 by
Kubernetes and Helm 101Kubernetes and Helm 101
Kubernetes and Helm 101Kirill Zonov
112 views17 slides
IBM Watson as tutor, not a voice interface by
IBM Watson as tutor, not a voice interfaceIBM Watson as tutor, not a voice interface
IBM Watson as tutor, not a voice interfaceKirill Zonov
87 views14 slides
DevOpsDays Berlin 2018 Terraform hands-on workshop by
DevOpsDays Berlin 2018 Terraform hands-on workshopDevOpsDays Berlin 2018 Terraform hands-on workshop
DevOpsDays Berlin 2018 Terraform hands-on workshopKirill Zonov
82 views12 slides
Go for Rubyists. August 2018. RUG-B Meetup by
Go for Rubyists. August 2018. RUG-B MeetupGo for Rubyists. August 2018. RUG-B Meetup
Go for Rubyists. August 2018. RUG-B MeetupKirill Zonov
208 views37 slides
Ruby on Grapes. Why did we choose Grape and why I would choose it again by
Ruby on Grapes. Why did we choose Grape and why I would choose it againRuby on Grapes. Why did we choose Grape and why I would choose it again
Ruby on Grapes. Why did we choose Grape and why I would choose it againKirill Zonov
2K views25 slides

More from Kirill Zonov(7)

AWS X-Ray introduction and my experience by Kirill Zonov
AWS X-Ray introduction and my experienceAWS X-Ray introduction and my experience
AWS X-Ray introduction and my experience
Kirill Zonov203 views
Kubernetes and Helm 101 by Kirill Zonov
Kubernetes and Helm 101Kubernetes and Helm 101
Kubernetes and Helm 101
Kirill Zonov112 views
IBM Watson as tutor, not a voice interface by Kirill Zonov
IBM Watson as tutor, not a voice interfaceIBM Watson as tutor, not a voice interface
IBM Watson as tutor, not a voice interface
Kirill Zonov87 views
DevOpsDays Berlin 2018 Terraform hands-on workshop by Kirill Zonov
DevOpsDays Berlin 2018 Terraform hands-on workshopDevOpsDays Berlin 2018 Terraform hands-on workshop
DevOpsDays Berlin 2018 Terraform hands-on workshop
Kirill Zonov82 views
Go for Rubyists. August 2018. RUG-B Meetup by Kirill Zonov
Go for Rubyists. August 2018. RUG-B MeetupGo for Rubyists. August 2018. RUG-B Meetup
Go for Rubyists. August 2018. RUG-B Meetup
Kirill Zonov208 views
Ruby on Grapes. Why did we choose Grape and why I would choose it again by Kirill Zonov
Ruby on Grapes. Why did we choose Grape and why I would choose it againRuby on Grapes. Why did we choose Grape and why I would choose it again
Ruby on Grapes. Why did we choose Grape and why I would choose it again
Kirill Zonov2K views
Haskell. Getting started (RU) by Kirill Zonov
Haskell. Getting started (RU)Haskell. Getting started (RU)
Haskell. Getting started (RU)
Kirill Zonov570 views

Recently uploaded

The Power of Heat Decarbonisation Plans in the Built Environment by
The Power of Heat Decarbonisation Plans in the Built EnvironmentThe Power of Heat Decarbonisation Plans in the Built Environment
The Power of Heat Decarbonisation Plans in the Built EnvironmentIES VE
69 views20 slides
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online by
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineKVM Security Groups Under the Hood - Wido den Hollander - Your.Online
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineShapeBlue
181 views19 slides
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava... by
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...ShapeBlue
101 views17 slides
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc
160 views29 slides
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or... by
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...ShapeBlue
158 views20 slides
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T by
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&TCloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&TShapeBlue
112 views34 slides

Recently uploaded(20)

The Power of Heat Decarbonisation Plans in the Built Environment by IES VE
The Power of Heat Decarbonisation Plans in the Built EnvironmentThe Power of Heat Decarbonisation Plans in the Built Environment
The Power of Heat Decarbonisation Plans in the Built Environment
IES VE69 views
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online by ShapeBlue
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineKVM Security Groups Under the Hood - Wido den Hollander - Your.Online
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online
ShapeBlue181 views
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava... by ShapeBlue
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
ShapeBlue101 views
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by TrustArc
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc160 views
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or... by ShapeBlue
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
ShapeBlue158 views
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T by ShapeBlue
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&TCloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
ShapeBlue112 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
The Role of Patterns in the Era of Large Language Models by Yunyao Li
The Role of Patterns in the Era of Large Language ModelsThe Role of Patterns in the Era of Large Language Models
The Role of Patterns in the Era of Large Language Models
Yunyao Li80 views
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
ShapeBlue179 views
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue by ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlueCloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
ShapeBlue94 views
NTGapps NTG LowCode Platform by Mustafa Kuğu
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform
Mustafa Kuğu365 views
Confidence in CloudStack - Aron Wagner, Nathan Gleason - Americ by ShapeBlue
Confidence in CloudStack - Aron Wagner, Nathan Gleason - AmericConfidence in CloudStack - Aron Wagner, Nathan Gleason - Americ
Confidence in CloudStack - Aron Wagner, Nathan Gleason - Americ
ShapeBlue88 views
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda... by ShapeBlue
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
ShapeBlue120 views
Extending KVM Host HA for Non-NFS Storage - Alex Ivanov - StorPool by ShapeBlue
Extending KVM Host HA for Non-NFS Storage -  Alex Ivanov - StorPoolExtending KVM Host HA for Non-NFS Storage -  Alex Ivanov - StorPool
Extending KVM Host HA for Non-NFS Storage - Alex Ivanov - StorPool
ShapeBlue84 views
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ... by ShapeBlue
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
ShapeBlue144 views
Why and How CloudStack at weSystems - Stephan Bienek - weSystems by ShapeBlue
Why and How CloudStack at weSystems - Stephan Bienek - weSystemsWhy and How CloudStack at weSystems - Stephan Bienek - weSystems
Why and How CloudStack at weSystems - Stephan Bienek - weSystems
ShapeBlue197 views
Data Integrity for Banking and Financial Services by Precisely
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial Services
Precisely78 views

Haml. New HTML? (RU)

  • 2. From ERB to Haml (Step 1) <div class="offering"> <div class="name"> <%= offering.name %> </div> <div class="symbol"> <%= offering.symbol %> </div> <div class="last_price"> <%= number_to_currency offering.last_price %> </div> <div class="last_traded_at"> <%= last_trade_at.to_formatted_s(:short) %> </div> <div class="actions"> <%= link_to "buy", offering_new_bid_path(offering) %> <% if offering.owners.find_by_user_id(session[:uid]) %> <%= link_to "sell", offering_new_ask_path(offering) %> <% end %> </div> </div>
  • 3. From ERB to Haml (Step 2) <div class="offering"> <div class="name"> <%= offering.name %> <div class="symbol"> <%= offering.symbol %> <div class="last_price"> <%= number_to_currency offering.last_price %> <div class="last_traded_at"> <%= last_trade_at.to_formatted_s(:short) %> <div class="actions"> <%= link_to "buy", offering_new_bid_path(offering) %> <% if offering.owners.find_by_user_id(session[:uid]) %> <%= link_to "sell", offering_new_ask_path(offering) %>
  • 4. From ERB to Haml (Step 3) .offering .name = offering.name .symbol = offering.symbol .last_price = number_to_currency offering.last_price .last_traded_at = last_trade_at.to_formatted_s(:short) .actions = link_to "buy", offering_new_bid_path(offering) - if offering.owners.find_by_user_id(session[:uid]) = link_to "sell", offering_new_ask_path(offering)
  • 5. Main ideas of Haml Markup should: ● be beautiful ● be clean ● be sensible ● follow the rules
  • 6. Rules of indentations .some_div line one line two <div class='some_div'> line one line two </div> <div class='some_div_two'> line one </div> .some_div_two line two line one line two If we try that: %h1 test work? (<h1> test work? </h1> ) Immediately we take error: Illegal nesting: content can't be both given on the same line as %h1 and nested within it.
  • 7. Size of code (erb) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> <%= configatron.app_name %> - <%= yield(:title) || 'Home' %> </title> <%= stylesheet_link_tag :flutie, 'application' %> <%= javascript_include_tag :defaults, 'rails.validations', 'jquery-snippet' %> <%= csrf_meta_tag %> <%= yield(:head) %> <%= yield :javascript %> </head> <body> <div class="content"> <%= render 'layouts/navigation' %> <hr /> <%= render 'layouts/messages' %> <% if show_title? %> <h1> <%= yield(:title) %> </h1> <% end %> <%= yield %> </div> </body> </html>
  • 8. Size of code (haml) !!! %html %head %meta{'http-equiv' => "Content-Type", 'content' => "text/html; charset=utf-8"} %title #{configatron.app_name} - #{yield(:title) || 'Home'} = stylesheet_link_tag :flutie, 'application' = javascript_include_tag :defaults, 'rails.validations', 'jquery-snippet' = csrf_meta_tag = yield(:head) = yield :javascript %body .content = render 'layouts/navigation' %hr = render 'layouts/messages' %h1=yield(:title) if show_title? = yield
  • 9. No need for words ;)
  • 10. Any problems with haml? ● Perfomance problems ● Need for retraining
  • 11. Perfomance Haml - 0.00033s ERB - 0.000222s Slim - 0.000254s Код: Haml ERB Slim %h1 Haml#index %p Find me in <h1>Erb#index</h1> <p>Find me in h1 Haml#index p Find me in app/views/haml/index.html.erb =@haml app/views/erb/index.html.erb</p> <%= @erb % app/views/slim/index.html.erb = @slim >
  • 12. Intuitive perception Html with css: <div class="highlight"> this is some stuff </div> .highlight { border: 1px solid #f00 } Haml with sass: .highlight this is some stuff .highlight border: 1px solid #f00
  • 13. Now you can see that Haml is REALLY better than erb You also can take a look for my blog graffzon.com