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

angular vs react
  • Angularjs
  • React
  • React native
  • Material design

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

The point of the presentation

whats 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..

white kids

Lets start with Angular


Superheroic JavaScript MVW Framework

Where W stands for Whatever works for you MVVM or MVC

Please enter color code..

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>

Behind the scenes: controller

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

  .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..


Behind the scenes: view

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

Looks clean, reusable and simple right?

thumbs up

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>' +
    controller: function ($scope) {
      $scope.color = $scope.default;

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


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} />

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>

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

React native

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



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.


golang and angular demo


do it yourself

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?

gopher eye balls out

Slides are available at: slides.gediminasm.org

Powered by: Revealjs