@hpoom 17
$( document ).ready(function() {
// Handler for .ready() called.
});
$(function() {
// Handler for .ready() called.
});
Slide 18
Slide 18 text
@hpoom
jquery
18
Slide 19
Slide 19 text
@hpoom
HTML5
Needs JS
19
Slide 20
Slide 20 text
@hpoom
Single Page
Web Apps
20
Slide 21
Slide 21 text
@hpoom
What are
single page apps?
21
Slide 22
Slide 22 text
@hpoom
thin client
THICK CLIENT
22
Slide 23
Slide 23 text
@hpoom
Advantages
Disadvantages
23
Slide 24
Slide 24 text
/
@hpoom
Backbone
Single Page Web App Frameworks
24
Angular Ember
Slide 25
Slide 25 text
/
@hpoom
TodoMVC todomvc.com
Slide 26
Slide 26 text
@hpoom
React
26
Slide 27
Slide 27 text
@hpoom
What is
React?
27
Slide 28
Slide 28 text
@hpoom
Components
28
Slide 29
Slide 29 text
@hpoom 29
Slide 30
Slide 30 text
@hpoom
Data Binding
30
Slide 31
Slide 31 text
@hpoom 31
Actions – Helper methods that facilitate
passing data to the Dispatcher
Dispatcher – Receives actions and
broadcasts payloads to registered
callbacks
Stores – Containers for application
state & logic that have callbacks
registered to the dispatcher
Controller Views – React Components
that grab the state from Stores and pass
it down via props to child components.
@hpoom 67
asyncCall().then(function(data1){
// do something...
return anotherAsyncCall();
}).then(function(data2){
// do something...
return oneMoreAsyncCall();
}).then(function(data3){
// the third and final async response
}).fail(function(err) {
// handle any error from any of the above calls
}).done();
Slide 68
Slide 68 text
@hpoom
HTTP
baked in
68
Slide 69
Slide 69 text
@hpoom
NPM
69
Slide 70
Slide 70 text
@hpoom 70
www.modulecounts.com
Slide 71
Slide 71 text
@hpoom
Challenges
71
Slide 72
Slide 72 text
@hpoom
Single
Instance
72
Slide 73
Slide 73 text
@hpoom 73
var express = require('express');
var app = express();
var globalCount = 0;
app.get('/', function (req, res) {
var localCount = 0;
globalCount++;
localCount++;
res.send('You visited #' + localCount + ' times!
Total visits #' + globalCount);
});
app.listen(8080);
Slide 74
Slide 74 text
@hpoom 74
You visited #1 times! Total visits #1
You visited #1 times! Total visits #2
You visited #1 times! Total visits #3
You visited #1 times! Total visits #4
You visited #1 times! Total visits #5
Slide 75
Slide 75 text
@hpoom
Exit On
Error
75
Slide 76
Slide 76 text
@hpoom 76
1.Close the server to stop accepting new
connections.
2.Wait for existing connections to finish and
close normally.
3.Only exit the process once all clients have
finished and disconnected happily.
4.Failsafe: before starting the shutdown, it’s
advisable to set an exit time limit. If the
shutdown hangs or takes too long, something else
is probably wrong so exit the process anyway.
Slide 77
Slide 77 text
@hpoom
Single
Threaded
77
Slide 78
Slide 78 text
/
@hpoom
PM2 pm2.keymetrics.io
Slide 79
Slide 79 text
@hpoom
No Web
Server
79
Slide 80
Slide 80 text
@hpoom
Memory
Management
80
Slide 81
Slide 81 text
@hpoom 81
Slide 82
Slide 82 text
@hpoom 82
Slide 83
Slide 83 text
@hpoom
IO js
83
Slide 84
Slide 84 text
@hpoom 84
Slide 85
Slide 85 text
@hpoom 85
Slide 86
Slide 86 text
@hpoom
Future of
Javascript
86
Slide 87
Slide 87 text
@hpoom
Evolution
87
Slide 88
Slide 88 text
@hpoom
Desktop App
Development
88
Slide 89
Slide 89 text
/
@hpoom
Electron electron.atom.io
Slide 90
Slide 90 text
@hpoom
Mobile App
Development
90
Slide 91
Slide 91 text
/
@hpoom
Ionic ionicframework.com
Slide 92
Slide 92 text
@hpoom
Thank you
please contact me if you have any questions
Twitter: @hpoom
logo
92
By Simon Wood www.CTO-meetup.com