Awesome html with ujs, jQuery and coffeescript
-
Upload
amir-barylko -
Category
Technology
-
view
676 -
download
2
description
Transcript of Awesome html with ujs, jQuery and coffeescript
AMIR BARYLKO
AWESOME HTML5 WITH
UJS, JQUERY &COFFEESCRIPT
ABOUT ME• Architect
• Developer
• Mentor
• Great cook
• Software Quality Expert at mavenTHOUGHT Inc.
CONTACT INFO
• Email: [email protected]
• 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
• Header
• Footer
• Aside
• Nav
• Article
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) { .... })
UNOBSTRUSIVEJAVASCRIPT
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
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 MODEL
public 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 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);
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 importantdeleteMovie = (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 bracketsif isJson callIndex() display()else dont()
• Or use unless for the negated form
CONDITIONALSPOSTFIX
• 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)
CLASSES
class 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: [email protected]
• Twitter : @abarylko
• Slides: http://orthocoders.com/presentations.html
• Company: http://maventhought.com