Asaf Shakarchi

Software development, hmm... software development :-)

Extending Behavior of React Components by ES6 Decorators & Higher Order Components

About Mixins & Higher Order Components

Sometimes it makes sense to extends a behavior of a component, while mixins are still alive, they’r not recommended anylonger, use Higher Order Components instead.

So instead of doing this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function StoreMixin(...stores) {
  var Mixin = {
    getInitialState() {
      return this.getStateFromStores(this.props);
    },
    ...
  }
}

var UserProfilePage = React.createClass({
  mixins: [StoreMixin(UserStore)],
  propTypes: {
    userId: PropTypes.number.isRequired
  },
  ...
})

You can do that:

1
2
3
4
5
6
7
8
9
10
11
function connectToStores(Component, stores, getStateFromStores) {
  const StoreConnection = React.createClass({
    getInitialState() {
      return getStateFromStores(this.props);
    },
    ...
    render() {
      return <Component {...this.props} {...this.state} />;
    }
  })
}

We just wrap the component and passes some additional props to it, it is a clean and generic solution for extending components without merging behaviors being implemented by React’s mixin merge logic.

You can read more about Higher Order Components here

Extending via ES6 Decorators

Sometimes it makes sense to extends a component without the need to wrap it manually, this technique is common in different frameworks to define components less verbosely when extra functionality is demanded.

Here is a short example how it works, Lets extends the context of our component hierarchy with a print function, so we use it in our render method:

1
2
3
4
5
6
7
8
class MyPage extends Component {
    static contextTypes = contextTypes;
    render() {
        return(
            <div>{this.context.print('Hello World')}</div>
        )
    }
}

Assuming MyPage is a child component of App, here is how our App component looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var contextTypes = {
    print: PropTypes.func.isRequired
}

var myContext = {
    print: (m) => (m)
}

@context(contextTypes, myContext)
export default class App extends Component {
    render() {
        return (
            <MyPage/>
        )
    }
}

And here is the code of the decorator:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default function context(contextTypes, context) {

    return function (DecoratedComponent) {
        return class {
            static childContextTypes = contextTypes;
            getChildContext() {
              return context;
            }
            render() {
              return (
                <DecoratedComponent {...this.props} />
              );
            }
        }
    }
}

The Decorator expects an expression and invokes the function with the given parameters and must return a function that expects the annotated component as a parameter, then we just return a class with some context the wraps our component.

You can read more about Decorators here.

Elegant Way to Use React With ES6/ES7 Features.

React, JSX, ES6.

So you want React, JSX the markup and write ES6/7 code style, but setting a working environment may be pain in the ass,

More to say, Facebook announced that its JSTransformer and react-tools going to be deprecated,

It seems like it’s starting to get confusing how to set a full working environment with JSX transformation and ES6/ES7 support.

While React 0.13.0-beta-1 announced great support for ES6, it still unclear how to build a full working environment that supports ES6 either,

You can find multiple boilerplate projects at github using WebPack, Browserify and other module loader tools available nowadays but I found all of them unclean, full of build scripts and things that just make things more complicated,

After doing some research, I feel like the best approach would be to go with JSPM repository that is based on SystemJs dynamic module loader.

The chosen tools:

  1. SytemJs – It is a Universal dynamic module loader, it supports AMD, CommonJS but the best of it is its native support for ES6 modules, with native support for Babel as its transpiler to ES5, it also uses JSPM which supports NPM and Github repos such as Bower does, so you can enjoy packages from both worlds.
  2. Babel as the ES6 transpiler, this transpiler is responsible to translate ES6 coding to ES5 as ES6 is not supported yet by most browsers, Babel is also supported by Facebook and provides JSX native transformation.

Enough said, here’s some code, we’ll start with empty folder!

Setting a clean working environment

Pre requisites

Lets install pre requisites:

1
2
npm install -g jspm
npm install -g http-server

Initializing Project

Create an empty folder and run

1
jspm init

You can choose default answers for all questions if not sure,

This will create a package.json and a config.js file required for SystemJs to work properly.

Now lets tweak config.js a bit to support ES7 so you can enjoy ES7+ property initializers and other ES7 cool features

1
2
3
4
5
6
7
"babelOptions": {
  blacklist: [],
  stage: 0,
  "optional": [
    "runtime"
  ]
},

blacklist: [] tells Babel not to ignore JSX transformation as by default it’s disabled, stage: 0 tells Babel that we want to use experimental ES7 syntax.

Creating an index.html file

Lets create our index file as every web app that respect itself has one!

Simply create index.html in the root folder with your favorite editor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Title Here</title>
    </head>
    <body>
        <!-- build:js -->
        <script src="jspm_packages/system.js"></script>
        <script src="config.js"></script>
        <script>
            System.import('app/main');
        </script>
        <!-- endbuild -->
    </body>
</html>

See how clean and elegant is it? we just load system.js as our dynamic module loader and the generated config.js that holds our SystemJs configuration.

Then we import app/main as our first ES6 module that serves the application.

Create a simple React based class.

Thanks to SystemJs, we can now fully write application modules, lets create our main application entry point

Create a file app/main.js with the following content:

1
2
3
4
import React from 'react';
import App from './app';

React.render(<App/>, document.body);

This just import React and renders our App component.

Her eis the app/app.js file content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';
var {Component} = React;

export default class MyApp extends Component {
    static propTypes = {
       flux: React.PropTypes.object.isRequired
   }

    render () {
        return (
            <div>Hello</div>
        )
    }
}

Now run http-server in your folder,

hitting http://localhost:8080 should display Hello :)

Summary

The combination of React, JSX transformation via Babel, and ES6/7 support via SystemJS provides a great clean and elegant way to write React code without the overhead of build systems and ugly scripts around.

Facebook React - Simplified Work Flow.

React is a really game changer in the world of web development, As most web frameworks (such Angular, Ember, etc) supports two way bindings that really simplifies development life, when applications start to get bigger things start to get clashed as multiple views may be bound to multiple models and getting unexpected behaviors is not something imaginary,

React solve these problems by exposing a new flow that is based on unidirectional binding, combined with the usage of virtual DOM, DOM reconciliation should result a better performance than two way bindings based frameworks, Well, if Facebook uses it, then it scales :)

You can read about it in React’s web site, especially the Tutorial should give you a great starting point,

Watch out my next post about how to setup a React environment using great tools that will simplify your development lifecycle.

Hello World Using Ratpack.

About Ratpack

Ratpack is a set of Java libraries that facilitate fast, efficient, evolvable and well tested HTTP applications built on Netty event driven networking engine,

After crawling into its source code, I find it simple and easy to use and it feels right, why? because:

  1. It’s super simple, its core has very limited number of dependencies
  2. Has out of the box extensions such as Guice, Jackson, etc, but nothing dictates you using them thanks to Guice modular architecture.
  3. Compatible with Java8 lambda syntax
  4. Testing is very easy.

Code can be written in Groovy or Java, and since java8 lambda syntax is so pretty, I find it suitable for the Ratpack handlers architecture quit well.

So here’s a simple hello world using Ratpack and Java8,

The build file (Gradle)

While used to Maven, It feels like Ratpack folks like Gradle, so I said why not use it?

Here’s a simple build.gradle file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
buildscript {
  repositories {
    jcenter()
  }
  dependencies {
    classpath "io.ratpack:ratpack-gradle:0.9.13"
  }
}

apply plugin: "io.ratpack.ratpack-java"
apply plugin: "idea"

dependencies {
  //Ratpack uses slf4j for logging
  runtime "org.slf4j:slf4j-simple:1.7.5"
}

//we need this since 0.9.13 is based on snapshot version of Netty
repositories {
  jcenter()
    maven {
      url "http://clinker.netty.io/nexus/content/repositories/snapshots"
    }
}

Create basic directories

1
2
mkdir -p src/main/java
mkdir -p src/ratpack

Run in the command like gradle idea to create Intellij project:

1
gradle idea

One of the things I mostly like about Ratpack is that it has no real notion of a “container”, you can simply start it a plain main method just like that:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import ratpack.server.RatpackServer;
import ratpack.server.ServerConfig;

/**
 */
public class Server {
    public static void main(String[] args) throws Exception {
        RatpackServer server = RatpackServer.of(b -> b
                        .serverConfig(ServerConfig.embedded()) //default config
                        .registryOf(r -> r.add(String.class, "world"))  // registry of supporting objects - optional
                        .handlers(chain -> chain                    // request handlers - required
                                        .get("hello", ctx -> ctx.render(ctx.get(String.class) + " !"))
                        )
        );

        server.start();
    }
}

Server will start with on some available port and will print: Ratpack started for http://localhost:65478

now hit in the browser http://localhost:65478/hello ! :)

Choosing Java Backend Framework in 2015.

So it’s year 2015 and I’m taking a role in a new cloud service, helping to choose the right backend technology,

This is the summary of our requirements:

  1. Can quickly come up with some POC.
  2. HTTP driven.
  3. Native support for Async.
  4. Modular.
  5. Avoid frameworks that dictates specific code structure.

Here are few options we tried but decided to pivot and seek for alternatives,

Akka

Akka seems very promising, it feels lightweight, highly concurrent and distributed, Akka is based on actors pattern, an old pattern invented by Carl Hewitt and friends, promoted lately by Erlang,

We tried to create a POC with Akka, in conjuction with their new Akka Streams (which seems to replace Spray), both felt like a complete solution, but we decided to pivot out of it, I think I can summarize it in one sentence.

Although Akka seems to have support for Java, it’s just not a java project, Akka is written in Scala, and exposes Java APIs via bindings layers, I felt like its community is Scala oriented debugging code of Scala is something tough for people that plans to stick in the Java domain.

Vert.x

Vert.x is similar to NodeJs, written in Java, It is Netty based and works in a non blocking mode,

Vertx 3 seems to be very promising we found some advantages of it,

  1. We quickly could create a web app using Apex.
  2. Almost no configuration and deployment code is required to see real results.
  3. Completely written in Java (which was a big releaf after Akka)
  4. Scale out by levaraging an internal even bus.

But we decided to pivot again, but why?! because Vert.x makes certain irreversible decisions about how applications should be written, and working with the event bus was a nightmare, we tried to use Vertx Service Factory which eliminates most of the boilerplate code required to perform actions over the event bus, but it restrictions of passing only JsonObject and JsonArray frustrated us, We found ourself spending too much time on convertions between Vertx’s JsonObjects and application / core services models.

What now?

So what now? we’r still seeking for a better solution that hopefully will satisfy our needs.

Ember Forms

Smart, Intuitive forms for Ember.js styled with Bootstrap, Multi layouts and Validation support.

As my favorite web framework is emberjs, I lately needed forms support for one of my projects with the following set of features in mind:

  • Styled for Bootstrap but easy to stil differently.
  • Different layouts such inline and horizontal
  • Validations where validation rules are defined in model/controller and form supports for:
    • Change color & icons when validation rule fails.
    • Show error message per form input.
    • Submit button with async support that changes its styles & get disabled during async call.

So here is the result: https://github.com/indexiatech/ember-forms

Demo & docs: http://indexiatech.github.io/ember-forms

Bootstrap for Ember Is Born

Bootstrap is an amazing set of pure CSS3 / HTML 5 components, while EmberJs amazes in its beauty of making web applications right.

You can just hook both projects together by using Bootstrap as is in Handlebars templates, But soon enough, you will find yourself asking questions sucha s:

  • How do I interact between Bootstrap events and Ember (such as Controllers)?
  • How to pass Bootstrap components data from Ember (such as Controllers)

I’ve seen few options about the integration between both, but:

  • They are not easy and fun to use, they make the ease of Bootstrap too complex.
  • They are not well documented.
  • Development is too slow, I haven’t seen anything new lately.

So! I’m excited about a project I’ve been working lately with some guys to integrate Bootstrap & EmberJs together in a way that doesnt make Bootstrap usage more complex than using it as-is but providing great integration with EmberJs components.

Links!