SlideShare a Scribd company logo
1 of 21
Download to read offline
Haml
Sea-Anna Thompson
Full-Stack Rails Developer
Hi! I am
Haml the
hippo.
Overview
> What is Haml
> Why Haml is used
> Examples of HTML vs. HAML code *scaffolded a table that takes in name and age
> Haml and javascript
> Errors
> Summary
WhatisHaml(HTML abstraction markup language)
Indented, very clean and easy to read Markup
> Takes HTML tags < > and replaces them with %
> Takes Class and ID and defines them as . and #
inside documents
> Templating engine for Ruby on Rails
Haml loves to be clean and simple
Hamlcontinued...
> Haml uses indentation instead of end tags
> Replaces ERB files of HTML to embed ruby without all
the markup
>Implements Rails templates with the .haml extension
> Focuses on cleanliness, readability, and production
speed
Comparison HTML vs HAML
HTML
● <li> </li>
● <div class=“green_font”></div>
<div id=“notice”></div>
● .html.erb
● <% field %>
HAML
● %li
● .green_font
#notice
● .html.haml
● = field
WhyuseHaml? TherearesomanyMarkuplanguages...
> Code looks clean and easy to read
> Tags are prefixed with fewer characters
> Closing tags aren’t required
> Integrates Ruby code
yay!
Letsee
anexample
OfaFORM
_form.HTML.erb
Form
> Has an error message
> Takes a name and age of hippo
> Embedded Ruby code <% %>
> Classes are defined within a div
and labeled with class =
> Creates a hippo on submit
Characters = 568
Let'sseewhatIt
lookslikein
HAML
_form.HTML.haml
Form
> Same error message
> Still takes a name and age of hippo
> Embedded Ruby code With =
*Without <% %>
> Classes are defined with .
> Will create a Hippo
Characters = 377
Let’sseeanother
exampleofaTable
intheviewof
index.html.erb
index.html.erb
Hippo Table
> Has name and age
> Embedded Ruby code <% %>
> Lots of closing tags </ >
> Characters = 577
sameview,butin
Haml...
index.HTML.haml
Hippo Table
> Has a name and age
> Embedded Ruby code With =
*Without <% %>
> Major loss of closing tags
Characters = 408
HTML HAMLVS
ButwhataboutJavascript?
JavascriptandHaml
> You can pass ruby variables easily to javascript
> Can place javascript directly into a haml file if it is small and simple
Example of an alert with javascript in a haml file
Warning!Thingsdogowrong...
> Haml will break if it is
not properly indented
or spaced correctly
> Nesting text can
break easily.
Sometimes, Haml gets angry...
Summary
> Programmers enjoy Haml because of how clean the code is
> There are no end tags required and les characters overall
> Cool markup to learn if you are using ruby on rails
> Errors in rails will tell you what’s exactly wrong so it is okay to try and learn
> Seen in a lot of current rails projects
> There is a lot more to learn . . .
GettoknowHAMLmore...
> Sitepoint
https://www.sitepoint.com/an-introduction-to-haml/
> Haml.com
http://haml.info/docs/yardoc/file.REFERENCE.html
> Github
https://github.com/indirect/haml-rails
> Online Converters
https://haml2erb.org/
http://htmltohaml.com
Thankyou
Twitter @TheCoachFit
Github https://github.com/Seaanna
Linkedin www.linkedin.com/in/sea-anna
Email seaanna.thompson@gmail.com
Website seaannathompson.com
Sea-AnnaThompson
Full-Stack Rails Developer

More Related Content

What's hot

What's hot (18)

Ruby on Rails for beginners
Ruby on Rails for beginnersRuby on Rails for beginners
Ruby on Rails for beginners
 
Beginners PHP Tutorial
Beginners PHP TutorialBeginners PHP Tutorial
Beginners PHP Tutorial
 
Intro to-php-19 jun10
Intro to-php-19 jun10Intro to-php-19 jun10
Intro to-php-19 jun10
 
Php tutorial
Php  tutorialPhp  tutorial
Php tutorial
 
php_tizag_tutorial
php_tizag_tutorialphp_tizag_tutorial
php_tizag_tutorial
 
Ruby On Rails Introduction
Ruby On Rails IntroductionRuby On Rails Introduction
Ruby On Rails Introduction
 
John Rowley Notes
John Rowley NotesJohn Rowley Notes
John Rowley Notes
 
Constructor and encapsulation in php
Constructor and encapsulation in phpConstructor and encapsulation in php
Constructor and encapsulation in php
 
Ruby on Rails
Ruby on RailsRuby on Rails
Ruby on Rails
 
PHP Lesson
PHP LessonPHP Lesson
PHP Lesson
 
When To Use Ruby On Rails
When To Use Ruby On RailsWhen To Use Ruby On Rails
When To Use Ruby On Rails
 
Php 3 1
Php 3 1Php 3 1
Php 3 1
 
Ruby Basics
Ruby BasicsRuby Basics
Ruby Basics
 
Article 01 What Is Php
Article 01   What Is PhpArticle 01   What Is Php
Article 01 What Is Php
 
Web development
Web developmentWeb development
Web development
 
1336333055 php tutorial_from_beginner_to_master
1336333055 php tutorial_from_beginner_to_master1336333055 php tutorial_from_beginner_to_master
1336333055 php tutorial_from_beginner_to_master
 
Introduction to php
Introduction to phpIntroduction to php
Introduction to php
 
Cucumber: 小黃瓜驗收測試工具
Cucumber: 小黃瓜驗收測試工具Cucumber: 小黃瓜驗收測試工具
Cucumber: 小黃瓜驗收測試工具
 

Similar to -Haml Presentation

Similar to -Haml Presentation (20)

Introduction to HAML
Introduction to HAMLIntroduction to HAML
Introduction to HAML
 
Killing the Angle Bracket
Killing the Angle BracketKilling the Angle Bracket
Killing the Angle Bracket
 
Html introduction
Html introductionHtml introduction
Html introduction
 
lf-2003_01-0269
lf-2003_01-0269lf-2003_01-0269
lf-2003_01-0269
 
lf-2003_01-0269
lf-2003_01-0269lf-2003_01-0269
lf-2003_01-0269
 
The Skinny on Slim
The Skinny on SlimThe Skinny on Slim
The Skinny on Slim
 
belajar HTML 1
belajar HTML 1belajar HTML 1
belajar HTML 1
 
Html xhtml tag-sheet
Html xhtml tag-sheetHtml xhtml tag-sheet
Html xhtml tag-sheet
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
web development.pdf
web development.pdfweb development.pdf
web development.pdf
 
Web I - 02 - XHTML Introduction
Web I - 02 - XHTML IntroductionWeb I - 02 - XHTML Introduction
Web I - 02 - XHTML Introduction
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
Learning html. (Part- 1)
Learning html. (Part- 1)Learning html. (Part- 1)
Learning html. (Part- 1)
 
week 3 slides.pptx
week 3 slides.pptxweek 3 slides.pptx
week 3 slides.pptx
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
HTML literals, the JSX of the platform
HTML literals, the JSX of the platformHTML literals, the JSX of the platform
HTML literals, the JSX of the platform
 
Choosing a Templating System
Choosing a Templating SystemChoosing a Templating System
Choosing a Templating System
 
Haml & sass
Haml & sassHaml & sass
Haml & sass
 
html.pptx
html.pptxhtml.pptx
html.pptx
 
HTML
HTMLHTML
HTML
 

-Haml Presentation