jordic

React vs Angular

Some thoughts on react vs angular after building applications with both frameworks.

• Angular is a framwork vs React is a view library. Angular provides all you need out of the box for building good applications. (http/router/forms/material). But React has a better ecosystem of components (react-router/redux/react-forms/fetch). Angular is also modular, if you don't need some parts, you can provide your own implementation.

• Both has a cli tool (@angular/cli create-react-app), that automates the process of creating a new app, and wiring a webpack config. Both had config hided by default but on both config could be ejected. At this point perhaps React is a little more polished.

• Angular is one of the frameworks at google vs react is the framework at facebook, airbnb, netflix, twitter, cloudflare...

jordic

// webpack.config.js

let ExtractTextPlugin = require("extract-text-webpack-plugin");
let HtmlWebpackPlugin = require('html-webpack-plugin');

let CopyWebpackPlugin = require('copy-webpack-plugin');
let path = require('path');

module.exports = {
    entry: './src/index.js',

jordic

import { NgModule, Injectable, ModuleWithProviders,
    OpaqueToken, Inject } from '@angular/core';

import { Store } from '@ngrx/store';

import { WindowRef } from '../browser';

const GJS_CLIENT = 'https://apis.google.com/js/client.js';
const SCOPES = ['https://www.googleapis.com/auth/spreadsheets.readonly'];

jordic

declare var System: any;
declare var hola: any;
declare var window:any;

export function load() {
  System.import('app/test.js').then((m) => {
    // hola();
    console.log('loaded', m);
    m.hola();
  }).catch((e) => {

jordic

[Unit]
Description=gunicorn daemon
Requires=gunicorn.socket
After=network.target

[Service]
PIDFile=/run/gunicorn/pid
User=someuser
Group=someuser
WorkingDirectory=/home/someuser

jordic

let resolve = (num) => console.log('Promise resolved ', num);

let sub = fakeObservable(2000, 1).subscribe(resolve);
sub.unsubscribe();

fakeObservable(1000, 2).subscribe(resolve);

jordic

function fakeObservable(speed: number, num: number) {
  return new Observable(obs => {
    let t = setTimeout(() => {
      console.log('next value:', num);
      obs.next(num);
      obs.complete();
    }, speed);
    // Cancelation
    return () => {
      console.log('cancelled', num);

jordic

let resolve = (num) => console.log('Promise resolved ', num);

fakePromise(2000, 1).then(resolve);
fakePromise(1000, 2).then(resolve);

jordic

function fakePromise(delay: number, val:number): Promise<number> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('Promise resolved', val);
        resolve(val);
      }, delay);
    });
  }

jordic

import {
  Directive, Input, ElementRef, Output,
  Renderer, OnInit, HostListener, EventEmitter
} from '@angular/core';

export interface SortResult {
  from: number;
  to: number;
}