Demo done at ASP

1. AMIR BARYLKO
AWESOME HTML5
WITH
UJS, JQUERY &
COFFEESCRIPT

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

3. CONTACT INFO
• Email: amir@barylko.com
• Twitter: @abarylko
• Slides: http://orthocoders.com/presentations.html
• Company: http://maventhought.com

4. HTML5

5. SEMANTIC HTML
• Communication is key
• Being expressive
• Show intent
• Cleaner

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

7. 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?

8. 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....

9. 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'> ...

10. USAGES
• Store information related to your model or view
model
• Common usages like confirmation with data-
confirm

11. JQUERY

12. 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....

13. QUERYING WITH
CSS SELECTOR
• Elements in the page can be selected using css
selection syntax
• $('#movies')
• $('#movies a.movie')
• $('#movies > li')

14. MANIPULATE
DOM
• Modify the element classes
• $('.movie').addClass('new-release')
• $('.movie').toggleClass('selected')
• Add elements or remove elements
• $('.movie').append(....)

15. EVENTS
• Bind functions/handlers to events
• $(document).ready(function() { ... });
• $('#movies').on('click', function(e) { .... })

16. UNOBSTRUSIVE
JAVASCRIPT

17. 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

18. VS CONFIG
<appSettings>
<add key="webpages:Version" value="1.0.0.0" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

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

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

21. GIVEN THE
MODEL
public interface IMovie
{
[Required]
string Title { get; }
DateTime ReleaseDate { get; set; }
}

22. 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">
...

23. 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...

24. 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);

25. COFFEESCRIPT

26. 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

27. 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}"

28. FUNCTIONS
• The arrow/lambda is used to define functions
• square = (x) -> x * x
• Parenthesis are optional when passing parameters
• storageDelete movieId, true

29. FUNCTIONS II
• Return implicit (the last expression is the return
value)
•Multiple lines, indentation is important
deleteMovie = (e) ->
movieId = $(e.target)....
storageDelete(movieId)

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

31. MAPS & ARRAYS
• Arrays are declared with “[ ]”
• deploy = ['local', 'remote', 'uat']
• And maps using “{ }”
• testing = {v1: true, v2: false, v3: true}

32. CONDITIONALS
• Classic if does not need parenthesis or brackets
if isJson
callIndex()
display()
else
dont()
• Or use unless for the negated form

33. CONDITIONALS
POSTFIX
• The conditionals can be use as modifiers
• callIndex() if isJson
• exit() unless validated and inContext

34. LIST
COMPREHENSION
• 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)

35. CLASSES
class MovieRepository
newMovie: ->
$.ajax
url: someUrl
success: (data) -> $(id).append data

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

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

38. CONTACT INFO
• Email: amir@barylko.com
• Twitter: @abarylko
• Slides: http://orthocoders.com/presentations.html
• Company: http://maventhought.com