Awesome html with ujs, jQuery and coffeescript
0 likes1,072 views
The document provides an overview of HTML5, jQuery, and CoffeeScript. It discusses semantic HTML tags, unobtrusive JavaScript, jQuery features like DOM manipulation and events, and CoffeeScript features like string interpolation, functions, objects, and classes. Contact information is also included at the end.
![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](https://image.slidesharecdn.com/awesomehtmlwithujsjqueryandcoffeescript-120718140813-phpapp01/85/Awesome-html-with-ujs-jQuery-and-coffeescript-17-320.jpg)
![GIVEN THE
MODEL
public interface IMovie
{
[Required]
string Title { get; }
DateTime ReleaseDate { get; set; }
}](https://image.slidesharecdn.com/awesomehtmlwithujsjqueryandcoffeescript-120718140813-phpapp01/85/Awesome-html-with-ujs-jQuery-and-coffeescript-21-320.jpg)
![MAPS & ARRAYS
• Arrays are declared with “[ ]”
• deploy = ['local', 'remote', 'uat']
• And maps using “{ }”
• testing = {v1: true, v2: false, v3: true}](https://image.slidesharecdn.com/awesomehtmlwithujsjqueryandcoffeescript-120718140813-phpapp01/85/Awesome-html-with-ujs-jQuery-and-coffeescript-31-320.jpg)
![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)](https://image.slidesharecdn.com/awesomehtmlwithujsjqueryandcoffeescript-120718140813-phpapp01/85/Awesome-html-with-ujs-jQuery-and-coffeescript-34-320.jpg)
Awesome html with ujs, jQuery and coffeescript
- 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) { .... })
- 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