Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Awesome html with ujs, jQuery and coffeescript


Published on

Demo done at ASP

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Awesome html with ujs, jQuery and coffeescript

  2. 2. ABOUT ME• Architect• Developer• Mentor• Great cook• Software Quality Expert at mavenTHOUGHT Inc.
  3. 3. CONTACT INFO• Email:• Twitter: @abarylko• Slides:• Company:
  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 • $(#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) { .... })
  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="" /> <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);
  26. 26. ANOTHER ENERGY DRINK?• From • 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 = $( 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:• Twitter: @abarylko• Slides:• Company: