awesome html with ujs, jquery and coffeescript
DESCRIPTION
Demo done at ASPTRANSCRIPT
![Page 1: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/1.jpg)
AMIR BARYLKO
AWESOME HTML5 WITH
UJS, JQUERY &COFFEESCRIPT
![Page 2: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/2.jpg)
ABOUT ME• Architect
• Developer
• Mentor
• Great cook
• Software Quality Expert at mavenTHOUGHT Inc.
![Page 3: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/3.jpg)
CONTACT INFO
• Email: [email protected]
• Twitter : @abarylko
• Slides: http://orthocoders.com/presentations.html
• Company: http://maventhought.com
![Page 4: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/4.jpg)
HTML5
![Page 5: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/5.jpg)
SEMANTIC HTML
• Communication is key
• Being expressive
• Show intent
• Cleaner
![Page 6: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/6.jpg)
STRUCTURE WITH MEANING
• Section
• Header
• Footer
• Aside
• Nav
• Article
![Page 7: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/7.jpg)
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?
![Page 8: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/8.jpg)
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....
![Page 9: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/9.jpg)
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'> ...
![Page 10: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/10.jpg)
USAGES
• Store information related to your model or view model
• Common usages like confirmation with data-confirm
![Page 11: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/11.jpg)
JQUERY
![Page 12: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/12.jpg)
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....
![Page 13: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/13.jpg)
QUERYING WITH CSS SELECTOR
• Elements in the page can be selected using css selection syntax
• $('#movies')
• $('#movies a.movie')
• $('#movies > li')
![Page 14: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/14.jpg)
MANIPULATE DOM
• Modify the element classes
• $('.movie').addClass('new-release')
• $('.movie').toggleClass('selected')
• Add elements or remove elements
• $('.movie').append(....)
![Page 15: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/15.jpg)
EVENTS
• Bind functions/handlers to events
• $(document).ready(function() { ... });
• $('#movies').on('click', function(e) { .... })
![Page 16: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/16.jpg)
UNOBSTRUSIVEJAVASCRIPT
![Page 17: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/17.jpg)
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
![Page 18: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/18.jpg)
VS CONFIG
<appSettings>
<add key="webpages:Version" value="1.0.0.0" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
![Page 19: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/19.jpg)
CLIENT SIDE VALIDATION
@Html.Script("jquery.validate.min.js")
@Html.Script("jquery.validate.unobtrusive.min.js")
![Page 20: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/20.jpg)
MODEL ATTRIBUTES
• System.ComponentModel.DataAnnotations
• Helpers will generate extra code
• jQuery adds the functionality out of the box!
![Page 21: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/21.jpg)
GIVEN THE MODEL
public interface IMovie{ [Required] string Title { get; }
DateTime ReleaseDate { get; set; }}
![Page 22: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/22.jpg)
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">...
![Page 23: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/23.jpg)
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...
![Page 24: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/24.jpg)
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);
![Page 25: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/25.jpg)
COFFEESCRIPT
![Page 26: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/26.jpg)
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
![Page 27: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/27.jpg)
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}"
![Page 28: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/28.jpg)
FUNCTIONS
• The arrow/lambda is used to define functions• square = (x) -> x * x
• Parenthesis are optional when passing parameters• storageDelete movieId, true
![Page 29: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/29.jpg)
FUNCTIONS II
• Return implicit (the last expression is the return value)
•Multiple lines, indentation is importantdeleteMovie = (e) ->
movieId = $(e.target)....
storageDelete(movieId)
![Page 30: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/30.jpg)
OBJECTS
• Objects are declared using indentation
config = local: user: 'dev' pwd: 'dev123' remote: user: 'superdev' pwd: "impossibleToGuess"
![Page 31: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/31.jpg)
MAPS & ARRAYS
• Arrays are declared with “[ ]”
• deploy = ['local', 'remote', 'uat']
• And maps using “{ }”
• testing = {v1: true, v2: false, v3: true}
![Page 32: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/32.jpg)
CONDITIONALS
• Classic if does not need parenthesis or bracketsif isJson callIndex() display()else dont()
• Or use unless for the negated form
![Page 33: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/33.jpg)
CONDITIONALSPOSTFIX
• The conditionals can be use as modifiers
• callIndex() if isJson
• exit() unless validated and inContext
![Page 34: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/34.jpg)
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)
![Page 35: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/35.jpg)
CLASSES
class MovieRepository
newMovie: -> $.ajax url: someUrl success: (data) -> $(id).append data
![Page 36: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/36.jpg)
TESTING
• Is just Javascript
• so use Jasmine
• or Qunit
• any other....
![Page 37: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/37.jpg)
DEBUGGING
• Same variable names
• Just set a breakpoint in the code
• and add watches, etc....
![Page 38: Awesome html with ujs, jQuery and coffeescript](https://reader035.vdocuments.net/reader035/viewer/2022081400/554a5e61b4c905572f8b5178/html5/thumbnails/38.jpg)
CONTACT INFO
• Email: [email protected]
• Twitter : @abarylko
• Slides: http://orthocoders.com/presentations.html
• Company: http://maventhought.com