Awesome html with ujs, jQuery and coffeescript
Upcoming SlideShare
Loading in...5
×
 

Awesome html with ujs, jQuery and coffeescript

on

  • 986 views

Demo done at ASP

Demo done at ASP

Statistics

Views

Total Views
986
Views on SlideShare
986
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Awesome html with ujs, jQuery and coffeescript Awesome html with ujs, jQuery and coffeescript Presentation Transcript

    • 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• Company: http://maventhought.com
    • 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 an article with multiple sections?• What should I do?
    • 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....
    • 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> ...
    • 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 with the contents of the page• to a repository of plugins for common functionality• much more....
    • QUERYING WITH CSS SELECTOR• Elements in the page can be selected using css selection syntax • $(#movies) • $(#movies a.movie) • $(#movies > li)
    • MANIPULATE DOM• Modify the element classes • $(.movie).addClass(new-release) • $(.movie).toggleClass(selected)• Add elements or remove elements • $(.movie).append(....)
    • EVENTS• Bind functions/handlers to events • $(document).ready(function() { ... }); • $(#movies).on(click, function(e) { .... })
    • UNOBSTRUSIVE JAVASCRIPT
    • 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
    • VS CONFIG<appSettings> <add key="webpages:Version" value="1.0.0.0" /> <add key="ClientValidationEnabled" value="true" /> <add key="UnobtrusiveJavaScriptEnabled" value="true"/></appSettings>
    • 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 functionality out of the box!
    • 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" type="text" value="" name="Title" data-val-required="The Title field is required." data-val="true">...
    • 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...
    • 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);
    • COFFEESCRIPT
    • 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
    • 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}"
    • FUNCTIONS• The arrow/lambda is used to define functions • square = (x) -> x * x• Parenthesis are optional when passing parameters • storageDelete movieId, true
    • FUNCTIONS II• Return implicit (the last expression is the return value)•Multiple lines, indentation is important deleteMovie = (e) -> movieId = $(e.target).... storageDelete(movieId)
    • OBJECTS• Objects are declared using indentation config = local: user: dev pwd: dev123 remote: user: superdev pwd: "impossibleToGuess"
    • MAPS & ARRAYS• Arrays are declared with “[ ]” • deploy = [local, remote, uat]• And maps using “{ }” • testing = {v1: true, v2: false, v3: true}
    • CONDITIONALS• Classic if does not need parenthesis or brackets if isJson callIndex() display() else dont()• Or use unless for the negated form
    • CONDITIONALS POSTFIX• The conditionals can be use as modifiers • callIndex() if isJson • exit() unless validated and inContext
    • 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)
    • 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• Company: http://maventhought.com