Javascript: One language to rule them all

Javascript, a love/hate language for some. It is our only choice for client side programming which has has seen a rise in recent years, but Javascript is also a successful server side language too. What is it about this language that make it a universal language? Simon will cover why the asynchronous nature of Javascript works well server side and how React and Single Page Web Applications have push Javascript on the client side.

Transcript

1. @hpoom Javascript One language to rule them all By Simon Wood 1 www.CTO-meetup.com
2. / @hpoom About me Associate Director of Architecture & Engineering Holiday Extras Simon Wood 2
3. @hpoom We are building the future of travel
4. / @hpoom 4 What I am going to cover Single Page Web Apps Javascript Language Future of Javascript Server Side Javascript
5. @hpoom 5 "JavaScript: Good Parts vs. The Rest" by Nathan Smith. Licensed under Creative Commons.- https://flic.kr/p/8aGB5o
6. @hpoom 6 Math.min() < Math.max(); // false typeof NaN; // “number” typeof null; // ”object” null instanceof Object; // false 0.1 + 0.2 == 0.3; // false
7. @hpoom 7
8. @hpoom Javascript The Language 8
9. @hpoom popularity 9
10. @hpoom 10
11. @hpoom Wide use cases 11
12. @hpoom standards 12
13. @hpoom 13
14. / @hpoom Can I use caniuse.com
15. / @hpoom Node Green node.green
16. @hpoom Client Side Javascript 16
17. @hpoom 17 $( document ).ready(function() { // Handler for .ready() called. }); $(function() { // Handler for .ready() called. });
18. @hpoom jquery 18
19. @hpoom HTML5 Needs JS
    19
20. @hpoom Single Page Web Apps 20
21. @hpoom What are single page apps? 21
22. @hpoom thin client THICK CLIENT 22
23. @hpoom Advantages Disadvantages 23
24. / @hpoom Backbone Single Page Web App Frameworks 24 Angular Ember
25. / @hpoom TodoMVC todomvc.com
26. @hpoom React 26
27. @hpoom What is React? 27
28. @hpoom Components 28
29. @hpoom 29
30. @hpoom Data Binding 30
31. @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.
32. @hpoom 32 bit.ly/cartoonRedux
33. @hpoom DOM 33 Virtual
34. @hpoom 34
35. @hpoom JSX 35
36. @hpoom 36 var Component = React.createClass({ render: function() { return ( <h1>Hello World</h1> ) } }) ReactDOM.render(<Component/>, document.body)
37. @hpoom 37 var Component = React.createClass({ render: function() { return React.createElement( “h1", null, "Hello World” ) } }) ReactDOM.render(<Component/>, document.body)
38. @hpoom 38 var Component = React.createClass({ render: function() { return ( <h1>Hello World</h1> ) } }) ReactDOM.render(<Component/>, document.body)
39. @hpoom Props 39
40. @hpoom 40 var Component = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired }, render: function() { return ( <h1>Hello {this.props.name}</h1> ) } }) ReactDOM.render(<Component name=“Jimmy”/>, document.body)
41. @hpoom 41 var Component = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired }, render: function() { return ( <h1>Hello {this.props.name}</h1> ) } }) ReactDOM.render(<Component name=“Jimmy”/>, document.body)
42. @hpoom State 42
43. @hpoom 43 var Counter = React.createClass({ getInitialState: function() { return { count: 0 } }, render: function() { return ( <button onClick={this.onButtonClick}> {this.state.count} </button> ) } onButtonClick: function() { this.setState({ count: ++this.state.count }) } }) ReactDOM.render(<Counter/>, document.body)
44. @hpoom 44 var Counter = React.createClass({ getInitialState: function() { return { count: 0 } }, render: function() { return ( <button onClick={this.onButtonClick}> {this.state.count} </button> ) } onButtonClick: function() { this.setState({ count: ++this.state.count }) } }) ReactDOM.render(<Counter/>, document.body)
45. @hpoom 45 var Counter = React.createClass({ getInitialState: function() { return { count: 0 } }, render: function() { return ( <button onClick={this.onButtonClick}> {this.state.count} </button> ) } onButtonClick: function() { this.setState({ count: ++this.state.count }) } }) ReactDOM.render(<Counter/>, document.body)
46. @hpoom 46 var Counter = React.createClass({ getInitialState: function() { return { count: 0 } }, render: function() { return ( <button onClick={this.onButtonClick}> {this.state.count} </button> ) } onButtonClick: function() { this.setState({ count: ++this.state.count }) } }) ReactDOM.render(<Counter/>, document.body)
47. @hpoom Relay 47
48. @hpoom Babel 48
49. / @hpoom RequireJS Module Including & Bundling 49 Browserify Webpack
50. @hpoom Challenges 50
51. / @hpoom Sentry Error Reporting Tools 51 Bugsnag Airbrake
52. / @hpoom Bugsnag bugsnag.com
53. @hpoom Analytics 53
54. @hpoom SEO With Single Page Apps 54
55. @hpoom Security 55
56. @hpoom Server Side Javascript 56
57. @hpoom Node JS 57
58. @hpoom 58
59. @hpoom 59
60. @hpoom Why Choose Node JS 60
61. @hpoom Full Stack Javascript 61
62. @hpoom Event Driven 62
63. @hpoom 63
64. @hpoom Hell 64 Callback
65. @hpoom 65 getData(function(a){ getMoreData(a, function(b){ getMoreData(b, function(c){ getMoreData(c, function(d){ getMoreData(d, function(e){ getMoreData(e, function(f){ ... }); }); }); }); }); });
66. @hpoom Promises 66
67. @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();
68. @hpoom HTTP baked in 68
69. @hpoom NPM 69
70. @hpoom 70 www.modulecounts.com
71. @hpoom Challenges 71
72. @hpoom Single Instance 72
73. @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);
74. @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
75. @hpoom Exit On Error 75
76. @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.
77. @hpoom Single Threaded 77
78. / @hpoom PM2 pm2.keymetrics.io
79. @hpoom No Web Server 79
80. @hpoom Memory Management 80
81. @hpoom 81
82. @hpoom 82
83. @hpoom IO js 83
84. @hpoom 84
85. @hpoom 85
86. @hpoom Future of Javascript 86
87. @hpoom Evolution 87
88. @hpoom Desktop App
    Development 88
89. / @hpoom Electron electron.atom.io
90. @hpoom Mobile App
    Development 90
91. / @hpoom Ionic ionicframework.com
92. @hpoom Thank you please contact me if you have any questions Twitter: @hpoom logo 92 By Simon Wood www.CTO-meetup.com