Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Domenic Denicola
This talk takes a deep dive into asynchronous programming patterns and practices, with an emphasis on the promise pattern.
We go through the basics of the event loop, highlighting the drawbacks of asynchronous programming in a naive callback style. Fortunately, we can use the magic of promises to escape from callback hell with a powerful and unified interface for async APIs. Finally, we take a quick look at the possibilities for using coroutines both in current and future (ECMAScript Harmony) JavaScript.
Love it or hate it, JavaScript is playing an increasingly important role in the next generation of web and mobile apps. As code continues to move from the server to the client, JavaScript is being used to do more than simple HTML manipulation. Be prepared for this transition and make sure the JavaScript you write is optimized and ready to perform on desktops and devices! In this session, you will learn ten practical tips that you can use today to write faster, more maintainable, memory friendly JavaScript.
The fundamentals and advance application of Node will be covered. We will explore the design choices that make Node.js unique, how this changes the way applications are built and how systems of applications work most effectively in this model. You will learn how to create modular code that’s robust, expressive and clear. Understand when to use callbacks, event emitters and streams.
This was a talk given at HTML5DevConf SF in 2015.
Ever wanted to write your own Browserify or Babel? Maybe have an idea for something new? This talk will get you started understanding how to use a JavaScript AST to transform and generate new code.
Video presentation: https://www.youtube.com/watch?v=jLAFXQ1Av50
Most applications written in Ruby are great, but also exists evil code applying WOP techniques. There are many workarounds in several programming languages, but in Ruby, when it happens, the proportion is bigger. It's very easy to write Ruby code with collateral damage.
You will see a collection of bad Ruby codes, with a description of how these codes affected negatively their applications and the solutions to fix and avoid them. Long classes, coupling, misapplication of OO, illegible code, tangled flows, naming issues and other things you can ever imagine are examples what you'll get.
Ten useful JavaScript tips & best practicesAnkit Rastogi
In this presentation there are ten useful JavaScript techniques which can be included in your application easily with less friction along with some AngularJs tips and best practices as a bonus. These tips and best practices are accompanied by examples & will cover script loading, design pattern, performance optimization and other areas.
Since best practices are very subjective topics, proper benchmarking needs to be done.
Xlab #1: Advantages of functional programming in Java 8XSolve
Presentation from xlab workshop about functional programming components introduced to the Java 8. How to operate the streams and lambdas in theory and practice.
Http4s, Doobie and Circe: The Functional Web StackGaryCoady
Http4s, Doobie and Circe together form a nice platform for building web services. This presentations provides an introduction to using them to build your own service.
Workshop JavaScript Testing. Frameworks. Client vs Server Testing. Jasmine. Chai. Nock. Sinon. Spec Runners: Karma. TDD. Code coverage. Building a testable JS app.
Presentado por ing: Raúl Delgado y Mario García
I discovered CoffeeScript during a recent project that Jim Garvin and I were working on. We knew the app was going to be heavy on the JavaScript, and that’s how we started – writing straight JavaScript. Even though I have written JavaScript for years, this time, the JavaScript syntax itself got in the way. CoffeeScript’s elegant syntax relieved the burden.
I quickly fell so in love with CoffeeScript that I have since sworn off writing raw JavaScript directly ever again. The goal of this talk is to convince the audience to try CoffeeScript in hopes that they too will find it as valuable as I did.
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Domenic Denicola
This talk takes a deep dive into asynchronous programming patterns and practices, with an emphasis on the promise pattern.
We go through the basics of the event loop, highlighting the drawbacks of asynchronous programming in a naive callback style. Fortunately, we can use the magic of promises to escape from callback hell with a powerful and unified interface for async APIs. Finally, we take a quick look at the possibilities for using coroutines both in current and future (ECMAScript Harmony) JavaScript.
Love it or hate it, JavaScript is playing an increasingly important role in the next generation of web and mobile apps. As code continues to move from the server to the client, JavaScript is being used to do more than simple HTML manipulation. Be prepared for this transition and make sure the JavaScript you write is optimized and ready to perform on desktops and devices! In this session, you will learn ten practical tips that you can use today to write faster, more maintainable, memory friendly JavaScript.
The fundamentals and advance application of Node will be covered. We will explore the design choices that make Node.js unique, how this changes the way applications are built and how systems of applications work most effectively in this model. You will learn how to create modular code that’s robust, expressive and clear. Understand when to use callbacks, event emitters and streams.
This was a talk given at HTML5DevConf SF in 2015.
Ever wanted to write your own Browserify or Babel? Maybe have an idea for something new? This talk will get you started understanding how to use a JavaScript AST to transform and generate new code.
Video presentation: https://www.youtube.com/watch?v=jLAFXQ1Av50
Most applications written in Ruby are great, but also exists evil code applying WOP techniques. There are many workarounds in several programming languages, but in Ruby, when it happens, the proportion is bigger. It's very easy to write Ruby code with collateral damage.
You will see a collection of bad Ruby codes, with a description of how these codes affected negatively their applications and the solutions to fix and avoid them. Long classes, coupling, misapplication of OO, illegible code, tangled flows, naming issues and other things you can ever imagine are examples what you'll get.
Ten useful JavaScript tips & best practicesAnkit Rastogi
In this presentation there are ten useful JavaScript techniques which can be included in your application easily with less friction along with some AngularJs tips and best practices as a bonus. These tips and best practices are accompanied by examples & will cover script loading, design pattern, performance optimization and other areas.
Since best practices are very subjective topics, proper benchmarking needs to be done.
Xlab #1: Advantages of functional programming in Java 8XSolve
Presentation from xlab workshop about functional programming components introduced to the Java 8. How to operate the streams and lambdas in theory and practice.
Http4s, Doobie and Circe: The Functional Web StackGaryCoady
Http4s, Doobie and Circe together form a nice platform for building web services. This presentations provides an introduction to using them to build your own service.
Workshop JavaScript Testing. Frameworks. Client vs Server Testing. Jasmine. Chai. Nock. Sinon. Spec Runners: Karma. TDD. Code coverage. Building a testable JS app.
Presentado por ing: Raúl Delgado y Mario García
I discovered CoffeeScript during a recent project that Jim Garvin and I were working on. We knew the app was going to be heavy on the JavaScript, and that’s how we started – writing straight JavaScript. Even though I have written JavaScript for years, this time, the JavaScript syntax itself got in the way. CoffeeScript’s elegant syntax relieved the burden.
I quickly fell so in love with CoffeeScript that I have since sworn off writing raw JavaScript directly ever again. The goal of this talk is to convince the audience to try CoffeeScript in hopes that they too will find it as valuable as I did.
jQuery Tips and Trick by NagaHarish on 21 Jan 2012... For the Demos given in this slides refer
https://github.com/anubavam-techkt/jQuery-tricks-tips-nagaharish
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptGuy Royse
Long ago, in the late days of the first Internet boom, before jQuery, before Underscore, before Angular, there was a web application built by a large corporation. This application was written as a server-side application using server-side technology like Java or PHP. A tiny seed of JavaScript was added to some of the pages of this application to give it a little sizzle.
Over the ages, this tiny bit of JavaScript grew like kudzu. Most of it was embedded in the HTML in
JavaScript Advanced - Useful methods to power up your codeLaurence Svekis ✔
Get this Course
https://www.udemy.com/javascript-course-plus/?couponCode=SLIDESHARE
Useful methods and JavaScript code snippets power up your code and make even more happen with it.
This course is perfect for anyone who has fundamental JavaScript experience and wants to move to the next level. Use and apply more advanced code, and do more with JavaScript.
Everything you need to learn more about JavaScript
Source code is included
60+ page Downloadable PDF guide with resources and code snippets
3 Challenges to get you coding try the code
demonstrating useful JavaScript methods that can power up your code and make even more happen with it.
Course lessons will cover
JavaScript Number Methods
JavaScript String Methods
JavaScript Math - including math random
DOMContentLoaded - DOM ready when the document has loaded.
JavaScript Date - Date methods and how to get set and use date.
JavaScript parse and stringify - strings to objects back to strings
JavaScript LocalStorage - store variables in the user browser
JavaScript getBoundingClientRect() - get the dimensions of an element
JavaScript Timers setTimeout() setInterval() requestAnimationFrame() - Run code when you want too
encodeURIComponent - encoding made easy
Regex - so powerful use it to get values from your string
prototype - extend JavaScript objects with customized powers
Try and catch - perfect for error and testing
Fetch xHR requests - bring content in from servers
and more
No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.
Step by step learning with all steps included.
Similar to Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine (20)
Presented at DevClub.lv meeting http://devclub.lv/announcing-6th-devclub-lv
(video recording of talk is here http://devclub.lv/test-driven-development-tdd-why-and-how-raimonds-simanovskis) and at Agile Tour Vilnius 2013 conference (http://www.agileturas.lt/vilnius#raimonds_simanovskis).
6. application.js
// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
12. Sample JavaScript
(from RailsCasts #267)
var CreditCard = {
cleanNumber: function(number) {
return number.replace(/[- ]/g, "");
},
validNumber: function(number) {
var total = 0;
number = this.cleanNumber(number);
for (var i=number.length-1; i >= 0; i--) {
var n = parseInt(number[i]);
if ((i+number.length) % 2 == 0) {
n = n*2 > 9 ? n*2 - 9 : n*2;
}
total += n;
};
return total % 10 == 0;
}
};
console.log(CreditCard.validNumber('4111 1111-11111111')); // true
console.log(CreditCard.validNumber('4111111111111121')); // false
13. We see as this
“ugly” Ruby
CreditCard = {
:cleanNumber => lambda { |number|
return number.gsub(/[- ]/, "");
},
:validNumber => lambda { |number|
total = 0;
number = CreditCard[:cleanNumber].call(number);
for i in 0..(number.length-1)
n = number[i].to_i;
if ((i+number.length) % 2 == 0)
n = n*2 > 9 ? n*2 - 9 : n*2;
end
total += n;
end;
return total % 10 == 0;
}
};
puts(CreditCard[:validNumber].call('4111 1111-11111111')); # true
puts(CreditCard[:validNumber].call('4111111111111121')); # false
14. Or as this “normal” Ruby
module CreditCard
def self.clean_number(number)
number.gsub(/[- ]/, "")
end
def self.valid_number?(number)
total = 0
number = clean_number(number)
for i in 0...number.length
n = number[i].to_i
if i+number.length % 2 == 0
n = n*2 > 9 ? n*2 - 9 : n*2
end
total += n
end
total % 10 == 0
end
end
puts CreditCard.valid_number?('4111 1111-11111111') # true
puts CreditCard.valid_number?('4111111111111121') # false
15. “Best practices” Ruby
class CreditCard
def initialize(number)
@number = clean_number(number)
end
def valid?
total = 0
for i in 0...@number.length
n = @number[i].to_i
if i+@number.length % 2 == 0
n = n*2 > 9 ? n*2 - 9 : n*2
end
total += n
end
total % 10 == 0
end
private
def clean_number(number)
number.gsub(/[- ]/, "")
end
end
puts CreditCard.new('4111 1111-11111111').valid? # true
puts CreditCard.new('4111111111111121').valid? # false
16. JavaScript has objects too!
var CreditCard = function(number) {
function cleanNumber(number) {
return number.replace(/[- ]/g, "");
}
this.number = cleanNumber(number);
};
CreditCard.prototype = {
isValid: function() {
var total = 0;
for (var i=this.number.length-1; i >= 0; i--) {
var n = parseInt(this.number[i]);
if ((i+this.number.length) % 2 == 0) {
n = n*2 > 9 ? n*2 - 9 : n*2;
}
total += n;
};
return total % 10 == 0;
}
};
console.log( (new CreditCard('4111 1111-11111111')).isValid() ); // true
console.log( (new CreditCard('4111111111111121')).isValid() ); // false
17. But this would be much
more Ruby-like!
class CreditCard
cleanNumber = (number) -> number.replace /[- ]/g, ""
constructor: (number) ->
@number = cleanNumber number
isValid: (number) ->
total = 0
for i in [0...@number.length]
n = +@number[i]
if (i+@number.length) % 2 == 0
n = if n*2 > 9 then n*2 - 9 else n*2
total += n
total % 10 == 0
console.log (new CreditCard '4111 1111-11111111').isValid() # true
console.log (new CreditCard '4111111111111121').isValid() # false
18.
19.
20. Sample CoffeeScript
# Assignment: # Splats:
number = 42 race = (winner, runners...) ->
opposite = true print winner, runners
# Conditions: # Existence:
number = -42 if opposite alert "I knew it!" if elvis?
# Functions: # Array comprehensions:
square = (x) -> x * x cubes = (math.cube num for num in list)
# Arrays:
list = [1, 2, 3, 4, 5]
# Objects:
math =
root: Math.sqrt
square: square
cube: (x) -> x * square x
21. Functions
square = (x) -> x * x
cube = (x) -> square(x) * x
fill = (container, liquid = "coffee") ->
"Filling the #{container} with #{liquid}..."
awardMedals = (first, second, others...) ->
gold = first
silver = second
rest = others
contenders = [
"Michael Phelps"
"Liu Xiang"
"Yao Ming"
"Allyson Felix"
"Shawn Johnson"
]
awardMedals contenders...
24. Existential Operator
solipsism = true if mind? and not world?
speed ?= 75
footprints = yeti ? "bear"
zip = lottery.drawWinner?().address?.zipcode
25. Conditionals
mood = greatlyImproved if singing
if happy and knowsIt
clapsHands()
chaChaCha()
else
showIt()
date = if friday then sue else jill
options or= defaults
26. Loops
eat food for food in ['toast', 'cheese', 'wine']
countdown = (num for num in [10..1])
earsOld = max: 10, ida: 9, tim: 11
ages = for child, age of yearsOld
child + " is " + age
27. Classes, Inheritance
and super
class Animal
constructor: (@name) ->
move: (meters) ->
alert @name + " moved " + meters + "m."
class Snake extends Animal
move: ->
alert "Slithering..."
super 5
class Horse extends Animal
move: ->
alert "Galloping..."
super 45
sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"
sam.move()
tom.move()
36. Browser-side
Views and Models
AppView
TodoList
keypress event
click event TodoView Todo
dblclick event TodoView Todo
TodoView Todo
click event
37. Browser-side
Views and Models
AppView
new, fetch
TodoList
keypress event
click event TodoView create, save
Todo
dblclick event TodoView Todo
TodoView Todo
click event
38. Browser-side
Views and Models
AppView
refresh, add TodoList
keypress event
click event TodoView Todo
dblclick event TodoViewchange, destroy Todo
TodoView Todo
click event
39. Browser-side Models
and RESTful resources
Browser Rails
GET
TodoList TodosController
POST index
Todo PUT show
Todo create
DELETE update
Todo
destroy
JSON
43. Todo model
class TodoApp.Todo extends Backbone.Model
# If you don't provide a todo, one will be provided for you.
EMPTY: "empty todo..."
# Ensure that each todo created has `content`.
initialize: ->
unless @get "content"
@set content: @EMPTY
# Toggle the `done` state of this todo item.
toggle: ->
@save done: not @get "done"
44. TodoList collection
class TodoApp.TodoList extends Backbone.Collection
# Reference to this collection's model.
model: TodoApp.Todo
# Save all of the todo items under the `"todos"` namespace.
url: '/todos'
# Filter down the list of all todo items that are finished.
done: ->
@filter (todo) -> todo.get 'done'
# Filter down the list to only todo items that are still not finished.
remaining: ->
@without this.done()...
# We keep the Todos in sequential order, despite being saved by unordered
# GUID in the database. This generates the next order number for new items.
nextOrder: ->
if @length then @last().get('order') + 1 else 1
# Todos are sorted by their original insertion order.
comparator: (todo) ->
todo.get 'order'
45. Todo item view
class TodoApp.TodoView extends Backbone.View
# ... is a list tag.
tagName: "li"
# Cache the template function for a single item.
template: TodoApp.template '#item-template'
# The DOM events specific to an item.
events:
"click .check" : "toggleDone"
"dblclick div.todo-content" : "edit"
"click span.todo-destroy" : "destroy"
"keypress .todo-input" : "updateOnEnter"
# The TodoView listens for changes to its model, re-rendering. Since there's
# a one-to-one correspondence between a **Todo** and a **TodoView** in this
# app, we set a direct reference on the model for convenience.
initialize: ->
_.bindAll this, 'render', 'close'
@model.bind 'change', @render
@model.bind 'destroy', => @remove()
# Re-render the contents of the todo item.
render: ->
$(@el).html @template @model.toJSON()
@setContent()
this
46. # Re-render the contents of the todo item.
render: ->
$(@el).html @template @model.toJSON()
@setContent()
Todo item view
this
# To avoid XSS (not that it would be harmful in this particular app),
# we use `jQuery.text` to set the contents of the todo item.
setContent: ->
content = @model.get 'content'
@$('.todo-content').text content
@input = @$('.todo-input')
@input.blur @close
@input.val content
# Toggle the `"done"` state of the model.
toggleDone: ->
@model.toggle()
# Switch this view into `"editing"` mode, displaying the input field.
edit: ->
$(@el).addClass "editing"
@input.focus()
# Close the `"editing"` mode, saving changes to the todo.
close: ->
@model.save content: @input.val()
$(@el).removeClass "editing"
# If you hit `enter`, we're through editing the item.
updateOnEnter: (e) ->
@close() if e.keyCode == 13
# Destroy the model.
destroy: ->
@model.destroy()
47. Application view
class TodoApp.AppView extends Backbone.View
# Instead of generating a new element, bind to the existing skeleton of
# the App already present in the HTML.
el: "#todoapp"
# Our template for the line of statistics at the bottom of the app.
statsTemplate: TodoApp.template '#stats-template'
# Delegated events for creating new items, and clearing completed ones.
events:
"keypress #new-todo" : "createOnEnter"
"keyup #new-todo" : "showTooltip"
"click .todo-clear a" : "clearCompleted"
# At initialization we bind to the relevant events on the `Todos`
# collection, when items are added or changed. Kick things off by
# loading any preexisting todos that might be saved.
initialize: ->
_.bindAll this, 'addOne', 'addAll', 'renderStats'
@input = @$("#new-todo")
@collection.bind 'add', @addOne
@collection.bind 'refresh', @addAll
@collection.bind 'all', @renderStats
@collection.fetch()
48. @collection.bind 'add', @addOne
@collection.bind 'refresh', @addAll
@collection.bind 'all', @renderStats
Application view
@collection.fetch()
# Re-rendering the App just means refreshing the statistics -- the rest
# of the app doesn't change.
renderStats: ->
@$('#todo-stats').html @statsTemplate
total: @collection.length
done: @collection.done().length
remaining: @collection.remaining().length
# Add a single todo item to the list by creating a view for it, and
# appending its element to the `<ul>`.
addOne: (todo) ->
view = new TodoApp.TodoView model: todo
@$("#todo-list").append view.render().el
# Add all items in the collection at once.
addAll: ->
@collection.each @addOne
# Generate the attributes for a new Todo item.
newAttributes: ->
content: @input.val()
order: @collection.nextOrder()
done: false
# If you hit return in the main input field, create new **Todo** model,
# persisting it to server.
createOnEnter: (e) ->
if e.keyCode == 13
@collection.create @newAttributes()
@input.val ''
49. view = new TodoApp.TodoView model: todo
@$("#todo-list").append view.render().el
# Add all items in the collection at once.
Application view
addAll: ->
@collection.each @addOne
# Generate the attributes for a new Todo item.
newAttributes: ->
content: @input.val()
order: @collection.nextOrder()
done: false
# If you hit return in the main input field, create new **Todo** model,
# persisting it to server.
createOnEnter: (e) ->
if e.keyCode == 13
@collection.create @newAttributes()
@input.val ''
# Clear all done todo items, destroying their views and models.
clearCompleted: ->
todo.destroy() for todo in @collection.done()
false
# Lazily show the tooltip that tells you to press `enter` to save
# a new todo item, after one second.
showTooltip: (e) ->
tooltip = @$(".ui-tooltip-top")
val = @input.val()
tooltip.fadeOut()
clearTimeout @tooltipTimeout if @tooltipTimeout
unless val == '' or val == @input.attr 'placeholder'
@tooltipTimeout = _.delay ->
tooltip.show().fadeIn()
, 1000
50. #todoapp
index.html.haml
.title
%h1 Todos
.content
#create-todo
%input#new-todo{:placeholder => "What needs to be done?", :type => "text"}/
%span.ui-tooltip-top{:style => "display:none;"} Press Enter to save this task
#todos
%ul#todo-list
#todo-stats
%ul#instructions
%li Double-click to edit a todo.
:coffeescript
$ ->
TodoApp.appView = new TodoApp.AppView collection: new TodoApp.TodoList
%script#item-template{:type => "text/html"}
.todo{:class => "{{#done}}done{{/done}}"}
.display
%input{:class => "check", :type => "checkbox", :"{{#done}}checked{{/done}}" => true}
.todo-content
%span.todo-destroy
.edit
%input.todo-input{:type => "text", :value => ""}
%script#stats-template{:type => "text/html"}
{{#if total}}
%span.todo-count
51. %input#new-todo{:placeholder => "What needs to be done?", :type => "text"}/
%span.ui-tooltip-top{:style => "display:none;"} Press Enter to save this task
#todos
%ul#todo-list
index.html.haml
#todo-stats
%ul#instructions
%li Double-click to edit a todo.
:coffeescript
$ ->
TodoApp.appView = new TodoApp.AppView collection: new TodoApp.TodoList
%script#item-template{:type => "text/html"}
.todo{:class => "{{#done}}done{{/done}}"}
.display
%input{:class => "check", :type => "checkbox", :"{{#done}}checked{{/done}}" => true}
.todo-content
%span.todo-destroy
.edit
%input.todo-input{:type => "text", :value => ""}
%script#stats-template{:type => "text/html"}
{{#if total}}
%span.todo-count
%span.number {{remaining}}
%span.word {{pluralize remaining "item"}}
left.
{{/if}}
{{#if done}}
%span.todo-clear
%a{:href => "#"}
Clear
%span.number-done {{done}}
completed
%span.word-done {{pluralize done "item"}}
{{/if}}
56. Testing Todo model
describe "Todo", ->
todo = null
ajaxCall = (param) -> jQuery.ajax.mostRecentCall.args[0][param]
beforeEach ->
todo = new TodoApp.Todo
todos = new TodoApp.TodoList [todo]
it "should initialize with empty content", ->
expect(todo.get "content").toEqual "empty todo..."
it "should initialize as not done", ->
expect(todo.get "done").toBeFalsy()
it "should save after toggle", ->
spyOn jQuery, "ajax"
todo.toggle()
expect(ajaxCall "url").toEqual "/todos"
expect(todo.get "done").toBeTruthy()
57. and TodoList
collection
describe "TodoList", ->
attributes = [
content: "First"
done: true
,
content: "Second"
]
todos = null
beforeEach ->
todos = new TodoApp.TodoList attributes
it "should return done todos", ->
expect(_.invoke todos.done(), "toJSON").toEqual [attributes[0]]
it "should return remaining todos", ->
expect(_.invoke todos.remaining(), "toJSON").toEqual [attributes[1]]