Awesome html with ujs, jQuery and coffeescript

AMIR BARYLKO

AWESOME HTML5
WITH
UJS, JQUERY &
COFFEESCRIPT

ABOUT ME
• Architect
• Developer
• Mentor
• Great cook
• Software Quality Expert at mavenTHOUGHT Inc.

CONTACT INFO
• Email: amir@barylko.com

• Twitter: @abarylko

• Slides: http://orthocoders.com/presentations.html

• Company: http://maventhought.com

SEMANTIC HTML

• Communication is key
• Being expressive
• Show intent
• Cleaner

STRUCTURE WITH
MEANING
• Section • Nav
• Header • Article
• Footer
• Aside

ARE YOU SURE?

• Which comes ﬁrst, the section or the article?
• I have a section with multiple articles...
• Or is it an article with multiple sections?
• What should I do?

IS IT COMPATIBLE?

• Well.... (not for IE)
• Modernizr will ﬁx it for you!
• And generate the code to let those tags behave as
blocks, etc....

DATA ATTRIBUTES

• Add custom values to tags
• The attribute has to start with data-*
• The value could be any string, for example:
<span data-id='309'
data-title='someTitle' data-time='10:00:30'> ...

USAGES

• Store information related to your model or view
model
• Common usages like conﬁrmation with data-
confirm

WHAT IS IT?
• Javascript library/framework to provide easy access
• to operations that manipulate the DOM
• to interact with the contents of the page
• to a repository of plugins for common functionality
• much more....

QUERYING WITH
CSS SELECTOR
• Elements in the page can be selected using css
selection syntax
• $('#movies')

• $('#movies a.movie')

• $('#movies > li')

MANIPULATE
DOM
• Modify the element classes
• $('.movie').addClass('new-release')

• $('.movie').toggleClass('selected')

• Add elements or remove elements
• $('.movie').append(....)

EVENTS

• Bind functions/handlers to events
• $(document).ready(function() { ... });

• $('#movies').on('click', function(e) { .... })

WIKIPEDIA SAYS
Unobtrusive JavaScript is a general approach to the use of
JavaScript in web pages. Though the term is not formally deﬁned, its basic
principles are generally understood to include:

■ Separation of functionality (the "behavior layer") from a Web page's
structure/content and presentation[1]
■ Best practices to avoid the problems of traditional JavaScript
programming (such as browser inconsistencies and lack ofscalability)
■ Progressive enhancement to support user agents that may not support
advanced JavaScript functionality

VS CONFIG
<appSettings>

<add key="webpages:Version" value="1.0.0.0" />

<add key="ClientValidationEnabled" value="true" />

<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

</appSettings>

CLIENT SIDE
VALIDATION
@Html.Script("jquery.validate.min.js")

@Html.Script("jquery.validate.unobtrusive.min.js")

MODEL
ATTRIBUTES
• System.ComponentModel.DataAnnotations
• Helpers will generate extra code
• jQuery adds the functionality out of the box!

GIVEN THE
MODEL
public interface IMovie
{
[Required]
string Title { get; }

DateTime ReleaseDate { get; set; }
}

ACTUAL HTML
<label for="Title">Title</label>

<input id="Title"
class="text-box single-line input-validation-error"
type="text" value=""
name="Title"
data-val-required="The Title field is required."
data-val="true">
...

WHY
UNOBTRUSIVE?
• Stay out of the way!
• Separate behavior from markup
• Use a different ﬁle for the Javascript code
• Use jQuery to handle events, etc...

NO MORE
HANDLERS INLINE
• Instead of
<a class="btn" href="#" onclick="addMovie()">

• Use jQuery to bind the event
<a class="btn" href="#" id="add-movie">
$('#add-movie').on('click', addMovie);

ANOTHER
ENERGY DRINK?
• From coffeescript.org:
• CoffeeScript is a little language that compiles into
JavaScript. Underneath all those awkward braces and
semicolons, JavaScript has always had a gorgeous object
model at its heart. CoffeeScript is an attempt to expose
the good parts of JavaScript in a simple way.

• The website has a great tutorial showing side by
side comparison with Javascript

STRING
INTERPOLATION
• You can concatenate inside a double quote string
using the “#” and “{ }”
• "The result is #{3}" == "The result is 3"

• Or use any expression
• "/movies/#{id}"

FUNCTIONS

• The arrow/lambda is used to deﬁne functions
• square = (x) -> x * x

• Parenthesis are optional when passing parameters
• storageDelete movieId, true

FUNCTIONS II

• Return implicit (the last expression is the return
value)

•Multiple lines, indentation is important
deleteMovie = (e) ->
movieId = $(e.target)....
storageDelete(movieId)

OBJECTS

• Objects are declared using indentation
config =
local:
user: 'dev'
pwd: 'dev123'
remote:
user: 'superdev'
pwd: "impossibleToGuess"

MAPS & ARRAYS

• Arrays are declared with “[ ]”
• deploy = ['local', 'remote', 'uat']

• And maps using “{ }”
• testing = {v1: true, v2: false, v3: true}

CONDITIONALS

• Classic if does not need parenthesis or brackets
if isJson
callIndex()
display()
else
dont()

• Or use unless for the negated form

CONDITIONALS
POSTFIX
• The conditionals can be use as modiﬁers
• callIndex() if isJson

• exit() unless validated and inContext

LIST
COMPREHENSION
• Iterate and call a function over each element
• deploy env for env in ['local', 'uat', 'prod']

• Or ﬁlter over a collection
• allSelected = (n for n in nodes when n.selected)

CLASSES
class MovieRepository

newMovie: ->
$.ajax
url: someUrl
success: (data) -> $(id).append data

TESTING

• Is just Javascript
• so use Jasmine
• or Qunit
• any other....

DEBUGGING

• Same variable names
• Just set a breakpoint in the code
• and add watches, etc....

Awesome html with ujs, jQuery and coffeescript

More Related Content

What's hot

Similar to Awesome html with ujs, jQuery and coffeescript

More from Amir Barylko

Recently uploaded

Awesome html with ujs, jQuery and coffeescript