awesome html with ujs, jquery and coffeescript

Download Awesome html with ujs, jQuery and coffeescript

Post on 07-May-2015

675 views

Category:

Technology

2 download

Embed Size (px)

DESCRIPTION

Demo done at ASP

TRANSCRIPT

  • 1.AMIR BARYLKOAWESOME HTML5WITH 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 rst, 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 x it for you! And generate the code to let those tags behave asblocks, etc.... 9. DATA ATTRIBUTES Add custom values to tags The attribute has to start with data-* The value could be any string, for example: ... 10. USAGES Store information related to your model or viewmodel Common usages like conrmation 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 cssselection syntax $(#movies) $(#movies a.movie) $(#movies > li) 14. MANIPULATEDOM 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 SAYSUnobtrusive JavaScript is a general approach to the use ofJavaScript in web pages. Though the term is not formally dened, its basicprinciples are generally understood to include: Separation of functionality (the "behavior layer") from a Web pagesstructure/content and presentation[1] Best practices to avoid the problems of traditional JavaScriptprogramming (such as browser inconsistencies and lack ofscalability) Progressive enhancement to support user agents that may not supportadvanced JavaScript functionality 18. VS CONFIG 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 THEMODELpublic interface IMovie{[Required]string Title { get; }DateTime ReleaseDate { get; set; }} 22. ACTUAL HTMLTitle... 23. WHY UNOBTRUSIVE? Stay out of the way! Separate behavior from markup Use a different le for the Javascript code Use jQuery to handle events, etc... 24. NO MOREHANDLERS INLINE Instead of Use jQuery to bind the event$(#add-movie).on(click, addMovie); 25. COFFEESCRIPT 26. ANOTHERENERGY DRINK? From coffeescript.org: CoffeeScript is a little language that compiles intoJavaScript. Underneath all those awkward braces andsemicolons, JavaScript has always had a gorgeous objectmodel at its heart. CoffeeScript is an attempt to exposethe good parts of JavaScript in a simple way. The website has a great tutorial showing side byside comparison with Javascript 27. STRINGINTERPOLATION You can concatenate inside a double quote stringusing the # and { } "The result is #{3}" == "The result is 3" Or use any expression "/movies/#{id}" 28. FUNCTIONS The arrow/lambda is used to dene functions square = (x) -> x * x Parenthesis are optional when passing parameters storageDelete movieId, true 29. FUNCTIONS II Return implicit (the last expression is the returnvalue)Multiple lines, indentation is importantdeleteMovie = (e) ->movieId = $(e.target)....storageDelete(movieId) 30. OBJECTS Objects are declared using indentationconfig =local:user: devpwd:dev123remote:user: superdevpwd:"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 bracketsif isJsoncallIndex()display()elsedont() Or use unless for the negated form 33. CONDITIONALSPOSTFIX The conditionals can be use as modiers callIndex() if isJson exit() unless validated and inContext 34. LISTCOMPREHENSION Iterate and call a function over each element deploy env for env in [local, uat, prod] Or lter over a collection allSelected = (n for n in nodes when n.selected) 35. CLASSESclass MovieRepositorynewMovie: ->$.ajaxurl: someUrlsuccess: (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