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

HTML5

SEMANTIC HTML

• Communication is key

• Being expressive

• Show intent

• Cleaner

STRUCTURE WITH MEANING

• Section

• Header

• Footer

• Aside

• Nav

• Article

ARE YOU SURE?

• Which comes first, 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 fix 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 confirmation with data-confirm

JQUERY

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) { .... })

UNOBSTRUSIVEJAVASCRIPT

WIKIPEDIA SAYS

Unobtrusive JavaScript is a general approach to the use of JavaScript in web pages. Though the term is not formally defined, 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 file 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);

COFFEESCRIPT

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 define 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 importantdeleteMovie = (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 bracketsif isJson callIndex() display()else dont()

• Or use unless for the negated form

CONDITIONALSPOSTFIX

• The conditionals can be use as modifiers

• callIndex() if isJson

• exit() unless validated and inContext

LISTCOMPREHENSION

• Iterate and call a function over each element

• deploy env for env in ['local', 'uat', 'prod']

• Or filter 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....

CONTACT INFO

• Email: amir@barylko.com

• Twitter : @abarylko

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

• Company: http://maventhought.com