Month: May 2014

React / Client side routing – Path component

May 11, 2014 by Daniel Kos·0 Comments

React is view only library. I really like that it doesn’t try to be a full stack solution. Thanks to that it’s easy to fill the gaps with the library you know and prefer. And routing is one of those gap. In my first react’s app I simply took a look at complementary tools page and chose directorjs for a start. It worked well although very soon I stumbled across few annoying bugs (like not calling route action on init). Workarounds exist but looks like author has no time recently to provide proper fixes. But bugs are not a problem actually. Directorjs simply doesn’t fit conceptually to react. They are two different worlds. So I looked further. The next promising library was react router component. Composable routes in a way one compose react’s comonents was exactly what I was looking for. Unfortunately I have to give up on it because it was a nodejs component and I needed simple and pure javascript solution. And it was too big for my needs. Finally I decided to create my own routing component. Of course it doesn’t have so many features – for example it lacks server side routing (I use scala and spray for that) or server side component rendering but it solves client side routing (for now without supporting html5 history). Sources can be find here: https://github.com/unodgs/react-path-router. Screenshot from github demo:

And the demo source file:

/** @jsx React.DOM */
var About = React.createClass({
	render: function() {
		return (
			<h1>This is a routing demo!</h1>
		);
	}
});

var UserList = React.createClass({
	render: function() {
		var _this = this;

		var users = [
			{id: 1001, username: 'unodgs', password: 'topsecret', firstName: 'Daniel', lastName: 'Kos'},
			{id: 1002, username: 'admin', password: 'admin', firstName: 'Jack', lastName: 'Strong'},
			{id: 1003, username: 'mike', password: 'mike123', firstName: 'Mike', lastName: 'Weak'},
			{id: 1004, username: 'frodo', password: 'ppp222', firstName: 'Michael', lastName: 'Watson'}
		];

		var usersHtml = _.map(users, function(u) {
			return (
				<tr>
					<td>{u.username}</td>
					<td>{u.password}</td>
					<td>{u.firstName}</td>
					<td>{u.lastName}</td>
					<td><A url={_this.props.componentUrl} path={"edit/" + u.id}>Edit</A></td>
				</tr>
			);
		});

		return (
			<table className="table">
				<thead>
					<th>Username</th>
					<th>Password</th>
					<th>First name</th>
					<th>Last name</th>
					<th></th>
				</thead>
				<tbody>
					{usersHtml}
				</tbody>
			</table>
		);
	}
});

var UserEdit = React.createClass({
	render: function() {
		return (
			<Paths>
				<Path url={this.props.url} name="/">
					<form role="form">
						<div className="form-group">
							<label>Username</label>
							<input className="form-control"/>
						</div>
						<div className="form-group">
							<label>Password</label>
							<input type="password" className="form-control"/>
						</div>
						<div className="form-group">
							<label>First name</label>
							<input className="form-control"/>
						</div>
						<div className="form-group">
							<label>Last name</label>
							<input className="form-control"/>
						</div>
						<A className="btn btn-default" url={this.props.componentUrl} path="addfriend">Add friend</A>
					</form>
				</Path>
				<Path url={this.props.url} name="/addfriend">
					<h1>Adding friend form :)</h1>
				</Path>
			</Paths>
		);
	}
});

var UsersModule = React.createClass({
	render: function() {
		return (
			<Paths>
				<Path url={this.props.url} name="/" render={UserList}/>
				<Path url={this.props.url} name="edit/:userId" render={UserEdit}/>
			</Paths>
		);
	}
});

var ClientsModule = React.createClass({
	render: function() {
		return (
			<h1>This is a client list!</h1>
		);
	}
});

var App = React.createClass({
	render: function() {
		var menu = [
			{
				url: 'users',
				name: 'Users'
			},
			{
				url: 'clients',
				name: 'Clients'
			},
			{
				url: 'about',
				name: 'About'
			}
		];

		var _this = this;

		var drawMenu = function(menu) {
			var mm = _.map(menu, function(m) {
				var currentUrl = PathUtils.current();
				var menuUrl = PathUtils.combine(_this.props.parentUrl, m.url);

				return (
					<li className={menuUrl === currentUrl ? "active": ""}>
						<A url={_this.props.componentUrl} path={m.url}>{m.name}</A>
					</li>
				);
			});
			return (
				<nav className="navbar navbar-default navbar-top" role="navigation">
					<ul className="nav navbar-nav">{mm}</ul>
				</nav>
			);
		};

		var menuHtml = drawMenu(menu);

		return (
			<div>
				{menuHtml}
				<div className="container">
					<Path url={this.props.url} name="users" render={UsersModule}/>
					<Path url={this.props.url} name="clients" render={ClientsModule}/>
					<Path url={this.props.url} name="about" render={About}/>
				</div>
			</div>
		);
	}
});

PathInit(<App/>, document.body);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

/** @jsx React.DOM */

var About = React.createClass({

render: function() {

return (

<h1>This is a routing demo!</h1>

);

}

});

var UserList = React.createClass({

render: function() {

var _this = this;

var users = [

{id: 1001, username: 'unodgs', password: 'topsecret', firstName: 'Daniel', lastName: 'Kos'},

{id: 1002, username: 'admin', password: 'admin', firstName: 'Jack', lastName: 'Strong'},

{id: 1003, username: 'mike', password: 'mike123', firstName: 'Mike', lastName: 'Weak'},

{id: 1004, username: 'frodo', password: 'ppp222', firstName: 'Michael', lastName: 'Watson'}

];

var usersHtml = _.map(users, function(u) {

return (

<tr>

<td>{u.username}</td>

<td>{u.password}</td>

<td>{u.firstName}</td>

<td>{u.lastName}</td>

</tr>

);

});

return (

<thead>

<th>Username</th>

<th>Password</th>

<th>First name</th>

</thead>

<tbody>

{usersHtml}

</tbody>

</table>

);

}

});

var UserEdit = React.createClass({

render: function() {

return (

<Paths>

<label>Username</label>

</div>

<label>Password</label>

</div>

<label>First name</label>

</div>

</div>

<A className="btn btn-default" url={this.props.componentUrl} path="addfriend">Add friend</A>

</form>

</Path>

<h1>Adding friend form :)</h1>

</Path>

</Paths>

);

}

});

var UsersModule = React.createClass({

render: function() {

return (

<Paths>

</Paths>

);

}

});

var ClientsModule = React.createClass({

render: function() {

return (

<h1>This is a client list!</h1>

);

}

});

var App = React.createClass({

render: function() {

var menu = [

{

url: 'users',

{

url: 'clients',

{

url: 'about',

}

];

var _this = this;

var drawMenu = function(menu) {

var mm = _.map(menu, function(m) {

var currentUrl = PathUtils.current();

var menuUrl = PathUtils.combine(_this.props.parentUrl, m.url);

return (

</li>

);

});

return (

</nav>

);

};

var menuHtml = drawMenu(menu);

return (

<div>

{menuHtml}

</div>

);

}

});

PathInit(<App/>, document.body);

To initialize router PathInit function must be used. First argument is the main react component instance and the second is a dom node to which rendered component will be attached to. Having done that in App component we can now use <Path/>.

<Path url={this.props.url} name="users" render={UsersModule}/>
<Path url={this.props.url} name="/clients" render={ClientsModule}/>
<Path url={this.props.url} name="about/" render={About}/>

url is a constant attribute that must be passed to the Path to allow it properly analyze the url. It contains previous part of an url that was matched in the parent component and the “next url” that will be parsed in the context of current component (component that Path belongs to). I hope React authors allow in the future to define attributes that are automatically transferred from parent component. That would allow to avoid this boilerplate making Path declaration clearer. Anyway for now url is required to be provided by the user. Second attribute name defines part of the url that must be matched to render component pointed by render attribute. Name don’t distinguish between /clients, clients/ and clients. They are all equivalent. Name can also contains many parts: /clients/new, /clients/under/32 and so on. What’s more interesting it can contains parameters like that:

/client/:id
/group/:groupName/user/:userId

If such an url is matched, every parameter that was found is passed to the rendered component in it’s props. In the case above id would be accessed by this.props.id and the gorupName by this.props.groupName.

Path also passes one more parameter in the props of rendered component. It’s a componentUrl and it contains current component’s url. In the combination with an A component it can be used to build links in a safe way (that means you won’t need to change urls everywhere if for example one of the parent component’s name will change). In the example it’s used like this:

<li className={menuUrl === currentUrl ? "active": ""}>
	<A url={_this.props.componentUrl} path={m.url}>{m.name}</A>
</li><span style="background-color: #ffffff; font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.625;"> </span>

</li><span style="background-color: #ffffff; font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.625;"> </span>

Sometimes instead of building separate components and passing them as render attribute in many Paths it’s easier to choose what to render directly in one component.

<Paths>
	<Path url={this.props.url} name="/tab0">
		Content of the first tab
	</Path>
	<Path url={this.props.url} name="/tab1">
		Content of the second tab
	</Path>
</Paths>

<Paths>

Content of the first tab

</Path>

Content of the second tab

</Path>

</Paths>

Paths can be replaced with anything (<div> for example). It’s there only because in react you cannot return tags without common parent.

And pretty much that’s all :). I certainly will keep on working on Path component but I think it’s a good start for everyone that would like to develop something similar adjusted to his requirements. The current code is only 196 lines and should be easy to follow. See you.

Spray and static content

May 6, 2014 by Daniel Kos·0 Comments

When I was creating my first application in spray framework I used spray’s directive to serve static content:

trait StaticService extends HttpService {
	val staticRoute = {
		path("") {
			getFromResource("web/index.html")
		} ~ {
			getFromResourceDirectory("web")
		}
	}
}

object AkkaImplicits {
	implicit val system = ActorSystem("cryptex-system")
	implicit val timeout = Timeout(5, TimeUnit.SECONDS)
}

class CryptExServiceActor extends Actor with ApiService with StaticService {
	def actorRefFactory = context
	def receive = runRoute(apiRoute ~ staticRoute)
}

object Main extends App with SSLConfiguration {
	import AkkaImplicits._

	val transactionManager = system.actorOf(Props[TransactionManager], "cryptex-transaction-manager")
	val handler = system.actorOf(Props[CryptExServiceActor], "cryptex-service")
	IO(Http) ? Http.Bind(handler, interface = "localhost", port = 8080)
}

trait StaticService extends HttpService {

val staticRoute = {

path("") {

getFromResource("web/index.html")

} ~ {

getFromResourceDirectory("web")

}

object AkkaImplicits {

implicit val system = ActorSystem("cryptex-system")

implicit val timeout = Timeout(5, TimeUnit.SECONDS)

}

class CryptExServiceActor extends Actor with ApiService with StaticService {

def actorRefFactory = context

def receive = runRoute(apiRoute ~ staticRoute)

}

object Main extends App with SSLConfiguration {

import AkkaImplicits._

val transactionManager = system.actorOf(Props[TransactionManager], "cryptex-transaction-manager")

val handler = system.actorOf(Props[CryptExServiceActor], "cryptex-service")

IO(Http) ? Http.Bind(handler, interface = "localhost", port = 8080)

}

As you can see the main actor combines routes from apiRoute (handles all rest requests) and staticRoute (handles static content that is located in src/main/resources/web). Static route returns index.html if no path is provided in the url and any other resource from web directory otherwise). That works pretty well but has three disadvantages:

If any file from web directory will change hitting F5 in the browser will return previous content until spray server is restarted. That is very annoying during developing app’s frontend when one wants to see changes immediately.
Restarting spray server takes time. Sure it’s relatively not that long (on my machine around 3-4 sec) but still too slow for convenient development process.
Returning file content to the user requires JVM involving. Whatever they told you it’s not the best way to do it. And it’s better to save CPU cycles for more important tasks.

I decided to use nginx for that task (it’s small and fast with low memory footprint http server). Here’s my configuration (it’s based on one of the gists but unfortunately I don’t remember the author):

worker_processes  1;

events {
	worker_connections  1024;
}

http {
	server {
		listen                    9090 ssl;
		server_name               cryptex;
		charset                   utf8;

		ssl                       on;
		ssl_certificate           cryptex.cert;
		ssl_certificate_key       cryptex.key;

		ssl_session_timeout       5m;

		ssl_protocols             SSLv2 SSLv3 TLSv1;
		ssl_ciphers               HIGH:!aNULL:!MD5;
		ssl_prefer_server_ciphers on;

		access_log                logs/cryptex.access.log combined;
		error_log                 logs/cryptex.error.log debug;

		location / {
			include mime.types;
			root    web;
			index   index.html;
		}

		location /api {
			add_header "Access-Control-Allow-Origin" $http_origin;
			add_header "Access-Control-Allow-Credentials" "true";

			proxy_pass         http://localhost:8080;
			proxy_redirect     https:// http://;

			proxy_set_header   Host             $host;
			proxy_set_header   X-Real-IP        $remote_addr;
			proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
		}
	}
}

worker_processes 1;

events {

worker_connections 1024;

}

http {

server {

listen 9090 ssl;

server_name cryptex;

charset utf8;

ssl on;

ssl_certificate cryptex.cert;

ssl_certificate_key cryptex.key;

ssl_session_timeout 5m;

ssl_protocols SSLv2 SSLv3 TLSv1;

ssl_ciphers HIGH:!aNULL:!MD5;

ssl_prefer_server_ciphers on;

access_log logs/cryptex.access.log combined;

error_log logs/cryptex.error.log debug;

location / {

include mime.types;

root web;

index index.html;

}

location /api {

add_header "Access-Control-Allow-Origin" $http_origin;

add_header "Access-Control-Allow-Credentials" "true";

proxy_pass http://localhost:8080;

proxy_redirect https:// http://;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

To run nginx I created following script start_nginx.sh:

mkdir -p logs
mkdir -p temp
sudo nginx -p $(pwd) -c nginx.conf

mkdir -p logs

mkdir -p temp

sudo nginx -p $(pwd) -c nginx.conf

Notice the -p parameter. Without it nginx looks for provided configuration file (in my example called nginx.conf) in its default configuration directory. What’s interesting on Windows this parameter is not required. I was really surprised with this platform inconsistency.

To stop nginx you must run following command (nginx process it’s not “killable” (at least on windows)):

sudo nginx -p $(pwd) -c nginx.conf -s stop

1	sudo nginx -p $(pwd) -c nginx.conf -s stop

If everything is ok nginx will start listening on localhost:9000 and from now on it will be responsible for serving files from the web directory. I forgot to mention that I moved web folder outside resources folder to avoid including it in the final jar file.

Spray application is listening on localhost:8080 and all requests coming from localhost:9000/api/* are forwarded there. In my case I use ssl on port 9000 so I had to add following line:

proxy_redirect     https:// http://;

1	proxy_redirect https:// http://;

This line transforms https prefix into http one. Of course you can use ssl on spray side as well but it’s unnecessary protection doubling.

And that’s all. Hope that will help someone 🙂

React / Form component II

May 4, 2014 by Daniel Kos·0 Comments

I’ve been working on my form component and here it is: https://github.com/unodgs/react-semanticui-forms. Of course this is still work in progress and it’s missing few essential parts like select tag or better form definition errors handling but I’m already using it in my apps so why not you ;). Below screenshot from example app (from github repo):

Since the last time I made following changes:

ref is no longer needed in Submit declaration
data property was changed to dataFn. Now it points to this.dataFn (that comes from FormMixin). Unfortunately there is no (known to me) way of making it unnecessary (provided implicitly by Form component). But I can live with that – I hope future versions of react will make it possible.
dataFn must be provided in every component (including Form)

This is the code of the form from the screenshot:

var PersonalDataForm = React.createClass({
	mixins: [FormMixin],
	render: function() {
		return (
			<Form errorMsg={this.state.errorMsg} successMsg={this.state.successMsg} header="Personal data" formFn={this.formFn} ref="form" visible={this.props.visible}>
				<div className="two fields">
					<TextField label="First name" ref="firstName" formFn={this.formFn} notEmpty/>
					<TextField label="Last name" ref="lastName" formFn={this.formFn} notEmpty/>
				</div>
				<EmailField label="Email" ref="email" formFn={this.formFn} notEmpty/>
				<TextField label="Username" ref="userName" formFn={this.formFn} notEmpty/>
				<div className="two fields">
					<PasswordField label="Password" ref="password" formFn={this.formFn} notEmpty minLength="6"/>
					<PasswordField label="Repeat password" ref="repeat" valueFrom="password" formFn={this.formFn} notEmpty matchRef="password"/>
				</div>
				<Submit formFn={this.formFn}/>
			</Form>
		);
	}
});

var PersonalDataForm = React.createClass({

mixins: [FormMixin],

render: function() {

return (

</div>

</div>

</Form>

);

}

});

For now my form component is strictly connected with semantic ui css framework but I’m working on make it css independent. I hope you’ll find it useful. I’m aware of others similar components but none of them fits my needs. What I was missing the most was inability to freely mix form inputs with form layout. See you soon.

Digital Software Blog

C++, Scala, Javascript, U++, ReactJS, Spray.io

Month: May 2014

React / Client side routing – Path component

Spray and static content

React / Form component II