Whos the dude talking?

Gediminas Morkevičius aka @l3pp4rd

• A hardcore - ViM, Arch Linux, dwm user
• PHP, GO, C - coder
• And I share my stuff - github.com/l3pp4rd

Trending web technologies

Or we can cut this down to Angular and React

• Angularjs
• React
• React native
• Material design

You may not use it today, but tommorow you will..

The point of the presentation

In order for you to know that such tools exist.

And to make a little introduction

Angular, React and GO are fun to work with..

Lets start with Angular

Superheroic JavaScript MVW Framework

Where W stands for Whatever works for you MVVM or MVC

Behind the scenes: view

<section ng-controller="Colorizer">
<h3>Lets start with Angular</h3>

<img class="no-border" width="150px" src="img/angular.png" alt="angular"/>

<p>Superheroic JavaScript <strong ng-style="style">MVW</strong> Framework</p>

<p>Where <strong ng-style="style">W</strong> stands for <strong ng-style="style">Whatever works for you</strong> MVVM or MVC</p>

<form name="myForm" novalidate>
  <input type="text" required name="color_in" ng-model="style.color" value="{ style.color }" />
  <span style="color:red" ng-show="myForm.color_in.$error.required">Please enter color code..</span>
</form>
</section>

Behind the scenes: controller

function Colorizer($scope) {
  $scope.style = {color: "#AA0"}; // initialize model
}

angular
  .module('app', [])
  .controller('Colorizer', Colorizer);

Building components

The most important aspect of any framework, is how I can build components - building blocks

In Angular that is a directive..

Directives

Behind the scenes: view

<color-picker default="#AA0" />

Looks clean, reusable and simple right?

Behind the scenes: directive

function ColorPickerDirective() {
  return {
    restrict: 'E',
    replace: true,
    scope: { default: '@' },
    template: '<form name="myForm" novalidate>' +
      '<span style="color: {{ color }}">Choose a color</span> ' +
      '<input type="text" required name="color_in" ng-model="color" value="{{ color }}" />' +
      '<span style="color:red" ng-show="myForm.color_in.$error.required">Please enter color code..</span>' +
      '</form>',
    controller: function ($scope) {
      $scope.color = $scope.default;
    }
  };
}

angular
  .module('app', [])
  .directive('colorPicker', ColorPickerDirective);

React

In react, everything is a building block - component, nothing else

Behind the scenes:

<div id="color-picker"></div>

var ColorPicker = React.createClass({
  getInitialState: function() {
    return {color: this.props.default || '#AA0'};
  },

  handleChange: function(event) {
    this.setState({color: event.target.value});
  },

  render: function() {
    var style = {color: this.state.color};
    var errorStyle = {color: 'red'};
    var error;
    if (this.state.color.length === 0) {
      error = <span style={errorStyle}>Please enter color code..</span>;
    }
    return <form noValidate>
      <span style={style}>Choose a color</span>
      <input type="text" required defaultValue={this.state.color} onChange={this.handleChange} />
      {error}
    </form>
  }
});

React.render(<ColorPicker />, document.getElementById('color-picker'));

It is simple to compose components

var WithGithubButton = React.createClass({
  render: function() {
    return <div>
      <ColorPicker default="green" />
      <a href="https://github.com/DATA-DOG" className="hvr-float-shadow">find us on Github</a>
    </div>
  }
});

React.render(<WithGithubButton />, document.getElementById('with-button'));

React native

Since React can execute rendering in a separate thread, the performance for mobile world is awkward and React native addresses that.

Material design

It is an initiative from google, see reference: http://www.google.com/design/spec/material-design/introduction.html

• Angular - https://material.angularjs.org
• React - http://callemall.github.io/material-ui

Golang

Not exactly a web technology, but trending

It is not a rocket science, it is the simplest language out there. Think about C and it's success over the years. It is the most stable modern language.

Join gophers.lt user group.

Demo

golang and angular demo

Conclusion

But if you insist for my opinion?

• React - is more modular.
• React - does not bloat your html with tag attributes.
• Angular - is easier to integrate into an application.
• React - is not as smart as Angular and though, is closer to standard HTML.
• Angular - is hard to debug, there aren't straight forward error messages.
• Angular - is not friendly with requirejs, browserify - React is based on it.
• Angular - is more complex than React.

I would choose to develop my next application with React

Thank you

Any Questions?

Slides are available at: slides.gediminasm.org

Powered by: Revealjs