Your SlideShare is downloading. ×
0
AMIR BARYLKOAWESOME 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•   Comp...
HTML5
SEMANTIC HTML•   Communication is key•   Being expressive•   Show intent•   Cleaner
STRUCTURE WITH   MEANING•   Section   •   Nav•   Header    •   Article•   Footer•   Aside
ARE YOU SURE?•   Which comes first, the section or the article?•   I have a section with multiple articles...•   Or is it a...
IS IT COMPATIBLE?•   Well.... (not for IE)•   Modernizr will fix it for you!•   And generate the code to let those tags beh...
DATA ATTRIBUTES•   Add custom values to tags•   The attribute has to start with data-*•   The value could be any string, f...
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...
QUERYING WITH     CSS SELECTOR•   Elements in the page can be selected using css    selection syntax    •   $(#movies)    ...
MANIPULATE          DOM•   Modify the element classes    •   $(.movie).addClass(new-release)    •   $(.movie).toggleClass(...
EVENTS•   Bind functions/handlers to events      •   $(document).ready(function() { ... });      •   $(#movies).on(click, ...
UNOBSTRUSIVE JAVASCRIPT
WIKIPEDIA SAYSUnobtrusive JavaScript is a general approach to the use ofJavaScript in web pages. Though the term is not fo...
VS CONFIG<appSettings>  <add key="webpages:Version" value="1.0.0.0" />  <add key="ClientValidationEnabled" value="true" />...
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 fun...
GIVEN THE      MODELpublic 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"    ...
WHY     UNOBTRUSIVE?•   Stay out of the way!•   Separate behavior from markup•   Use a different file for the Javascript co...
NO MOREHANDLERS INLINE•   Instead of    <a class="btn" href="#" onclick="addMovie()">•   Use jQuery to bind the event    <...
COFFEESCRIPT
ANOTHER    ENERGY DRINK?•   From coffeescript.org:    •   CoffeeScript is a little language that compiles into        Java...
STRING    INTERPOLATION•   You can concatenate inside a double quote string    using the “#” and “{ }”    •   "The result ...
FUNCTIONS•   The arrow/lambda is used to define functions    •   square = (x) -> x * x•   Parenthesis are optional when pas...
FUNCTIONS II•   Return implicit (the last expression is the return    value)•Multiple lines, indentation is important    d...
OBJECTS•   Objects are declared using indentation    config =      local:        user:   dev        pwd:    dev123      re...
MAPS & ARRAYS•   Arrays are declared with “[ ]”    •   deploy = [local, remote, uat]•   And maps using “{ }”    •   testin...
CONDITIONALS•   Classic if does not need parenthesis or brackets    if isJson      callIndex()      display()    else     ...
CONDITIONALS      POSTFIX•   The conditionals can be use as modifiers    •   callIndex() if isJson    •   exit() unless val...
LISTCOMPREHENSION•   Iterate and call a function over each element    •   deploy env for env in [local, uat, prod]•   Or fi...
CLASSESclass 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•   Comp...
Upcoming SlideShare
Loading in...5
×

Awesome html with ujs, jQuery and coffeescript

697

Published on

Demo done at ASP

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
697
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Awesome html with ujs, jQuery and coffeescript"

  1. 1. AMIR BARYLKOAWESOME HTML5 WITH UJS, JQUERY & COFFEESCRIPT
  2. 2. ABOUT ME• Architect• Developer• Mentor• Great cook• Software Quality Expert at mavenTHOUGHT Inc.
  3. 3. CONTACT INFO• Email: amir@barylko.com• Twitter: @abarylko• Slides: http://orthocoders.com/presentations.html• Company: http://maventhought.com
  4. 4. HTML5
  5. 5. SEMANTIC HTML• Communication is key• Being expressive• Show intent• Cleaner
  6. 6. STRUCTURE WITH MEANING• Section • Nav• Header • Article• Footer• Aside
  7. 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. 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. 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. 10. USAGES• Store information related to your model or view model• Common usages like confirmation with data- confirm
  11. 11. JQUERY
  12. 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. 13. QUERYING WITH CSS SELECTOR• Elements in the page can be selected using css selection syntax • $(#movies) • $(#movies a.movie) • $(#movies > li)
  14. 14. MANIPULATE DOM• Modify the element classes • $(.movie).addClass(new-release) • $(.movie).toggleClass(selected)• Add elements or remove elements • $(.movie).append(....)
  15. 15. EVENTS• Bind functions/handlers to events • $(document).ready(function() { ... }); • $(#movies).on(click, function(e) { .... })
  16. 16. UNOBSTRUSIVE JAVASCRIPT
  17. 17. WIKIPEDIA SAYSUnobtrusive JavaScript is a general approach to the use ofJavaScript in web pages. Though the term is not formally defined, its basicprinciples are generally understood to include:■ Separation of functionality (the "behavior layer") from a Web pages 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. 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. 19. CLIENT SIDE VALIDATION@Html.Script("jquery.validate.min.js")@Html.Script("jquery.validate.unobtrusive.min.js")
  20. 20. MODEL ATTRIBUTES• System.ComponentModel.DataAnnotations• Helpers will generate extra code• jQuery adds the functionality out of the box!
  21. 21. GIVEN THE MODELpublic interface IMovie{ [Required] string Title { get; } DateTime ReleaseDate { get; set; }}
  22. 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. 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. 24. NO MOREHANDLERS 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. 25. COFFEESCRIPT
  26. 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. 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. 28. FUNCTIONS• The arrow/lambda is used to define functions • square = (x) -> x * x• Parenthesis are optional when passing parameters • storageDelete movieId, true
  29. 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. 30. OBJECTS• Objects are declared using indentation config = local: user: dev pwd: dev123 remote: user: superdev pwd: "impossibleToGuess"
  31. 31. MAPS & ARRAYS• Arrays are declared with “[ ]” • deploy = [local, remote, uat]• And maps using “{ }” • testing = {v1: true, v2: false, v3: true}
  32. 32. CONDITIONALS• Classic if does not need parenthesis or brackets if isJson callIndex() display() else dont()• Or use unless for the negated form
  33. 33. CONDITIONALS POSTFIX• The conditionals can be use as modifiers • callIndex() if isJson • exit() unless validated and inContext
  34. 34. 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)
  35. 35. CLASSESclass MovieRepository newMovie: -> $.ajax url: someUrl success: (data) -> $(id).append data
  36. 36. TESTING• Is just Javascript• so use Jasmine• or Qunit• any other....
  37. 37. DEBUGGING• Same variable names• Just set a breakpoint in the code• and add watches, etc....
  38. 38. CONTACT INFO• Email: amir@barylko.com• Twitter: @abarylko• Slides: http://orthocoders.com/presentations.html• Company: http://maventhought.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×