Falling in ❤️ with JavaScript

A "backend" developer for the past twenty years is taking his first steps into the new JS eco system and is falling in love with it.

Transcript

1. Falling in ❤ with
   JavaScript
   Stephen McCullough /
   / BelfastJS /
   / Oct 2018
   

   View Slide

2. WTF are you???
   Stephen McCullough
   Head tea boy @ Kanisi
   @swmcc - most places
   @theonlyswmcc - twitter
   Co-organiser of:
   pybelfast
   Belfast Elixir
   Belfast Ruby (announcement)
   I will *try* and behave
   

   View Slide

3. Falling in ❤ with
   JavaScript
   

   View Slide

4. View Slide

5. SWM’s Career - Part 1
   10th January 2000 - blackstar.co.uk
   Websites/apps were built using CGI
   Javascript was a 2nd class citizen
   php, perl, asp, cold fusion and JS enhanced
   remember DHTML?? ;)
   17th September 2007 - various places
   Surviving the great recession
   Using PHP :( :( :( :( :(
   19th September 2012 - RepKnight/Mission IQ/ShopKeep
   Using ‘modern’ practises/frameworks/methodologies/technology
   Still siloed as a ‘backend engineer’ - *NEVER* dealt with the ‘front end’
   

   View Slide

6. ShopKeep - JavaScript
   WHA????
   JS frontend (react) was baked into
   the monolith
   First time ever I had to deal with NPM
   First year or so I just deferred to a JS
   Engineer
   Slowly started getting used to the eco
   system.. slowly
   Started to be able to peer review
   simple bits of JS code
   BUT… Still very much in a silo
   

   View Slide

7. SWM’s Career - Part 2
   1st October 2018 - Kanisi Ltd - Rotor Videos
   Proper ‘startup’ with a limited runway
   Initially four peeps, with one more
   coming at the end of this month
   No silos due to time constraints
   Just get shit done
   

   View Slide

8. View Slide

9. View Slide

10. What I ❤
    ES6 - Class & Inheritance
    Babel - means I don’t have to worry
    Backend - Node.js
    

    View Slide

11. ES6 - Class & Inheritance
    class Polygon {
    constructor(height, width) { //class constructor
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
    }
    sayName() { //class method
    console.log('Hi, I am a', this.name + '.');
    }
    }
    class Square extends Polygon {
    constructor(length=10) { // ES6 features Default Parameters
    super(length, length); //call the parent method with super
    this.name = 'Square';
    }
    get area() { //calculated attribute getter
    return this.height * this.width;
    }
    }
    let s = new Square(5);
    s.sayName(); // => Hi, I am a Square.
    console.log(s.area); // => 25
    console.log(new Square().area); // => 100
    

    View Slide

12. Babel
    sample.js
    var odds = evens.map(v => v + 1);
    var nums = evens.map((v, i) => v + i);
    swm@Stephens-MacBook-Pro ~/Documents/talks/bf-js/oct18: babel sample.js
    "use strict";
    var odds = evens.map(function (v) {
    return v + 1;
    });
    var nums = evens.map(function (v, i) {
    return v + i;
    });
    

    View Slide

13. Almost finished….
    I’m only starting out
    I’d like to come back in several months
    Tell you what I’ve learned and what I think
    It wont be all good
    I’m in the honeymoon period at the mo
    

    View Slide

14. Fin
    @theonlyswmcc
    

    View Slide