Javascript: One language to rule them all

39bb8762f3a25ebc00ebd75bc4f363af?s=47 Simon Wood
November 03, 2016

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.

39bb8762f3a25ebc00ebd75bc4f363af?s=128

Simon Wood

November 03, 2016
Tweet

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