Tag Archives: expressJS

Feedbacks on my Isomorphic app using React and ES6

Experiments, , , ,

logo-reactjs

UPDATE: This project has been upgraded to React v0.14 – read the blog post about the upgrade.

This post is about a three steps project I initiated a few weeks ago. I completed the previous step about two weeks ago, so feel free to read my blog post about the front-end part : “Playing with ES6 (and React)”.

Before going further, a quote from stackoverflow (this is the most concise I found) :

Isomorphic web sites can be run on both the server and in the browser. They grant code reuse, seo, and page load speed boosts while still having an interface written in JS. node.js is most often used for the server javascript-engine.

Initial Goal

My challenge was to make an isomorphic app, using React and ES6 :

  • ES6 : I’ve been hearing about it for a while on meetups, articles I read, videos I watched – just like I knew it already – had to throw some real lines of codes 😉
  • React : Same as above (moreover, I’ve been doing a lot of Angular the past two years and hearing more and more about React lately, so I had to try it for real)
  • Isomorphic app : If I were about to use React in a project, it seems to be the perfect opportunity to try to implement it

Project Steps

I split the project into three parts :

  • topheman-apis-proxy : The backend part (and a project on its own as well, since it’s extensible and configurable)
  • topheman/react-es6 : The frontend part where I developed the app in ES6, using React, with the last step in mind – I only used isomorphic libraries
  • topheman/react-es6-isomorphic : The expressJS server in the middle, that handles server-side rendering. I retrieved the frontend part from the previous step. At this point, any missing feature in the client was first developed on the frontend project repo then merged back to this one, to make sure that each project stays focused on its scope (one on frontend, the other on server-side rendering).

Try the app (there is an about page that will help you understand the difference between the two projects). If you’re into React and server-side rendering, take a look at my feedbacks …

Give it a try ! Continue reading →

topheman-apis-proxy – access your public APIs on the same server

Experiments, , ,

As a frontend developer, when I want to try a new framework, I want to do something a little more elaborate than the todo-list that everybody has already done hundreds of times … What’s missing about that is data.

This is what topheman-apis-proxy is about : it gives you access to public APIs to get data to feed on and not have to bother about the server-side, focus on the client-side – install once, configure your credentials and you’re good to go.

You can currently access to the public APIs of Twitter and Github. I’ll add more and you’re welcome to get involved. You can configure things like CORS, access by token …

It is based on expressJS, I already use it for one of my projects.

TLDR;

If you’re a developer I assume you’ll jump right to the readme on github 😉

Tophe

topheman-apis-proxy

Playground 2

Experiments, , , ,

topheman-playground-bandeau

This project is more an experiment than really a game (it could lead to a game though). The concept is :

  • you open the website on your desktop browser
  • you snap the QR code with your smartphones (yours and friends’s or coworkers’s)
  • then you control your ball which is on the desktop monitor by tilting your phone … like a wiimote.

This is multiplayer (each player has a ball of a certain color – moving on the monitor and identified on his phone), there is a little chat (if you play with multiple monitors).

If you don’t have any phone, you can even run the device motion emulator ! (thanks to remote-tilt).

It runs with :

  • NodeJS
  • Express
  • socket.io
  • Ball.js

The site is hosted on a free heroku instance (I recently enabled the WebSockets which weren’t available on heroku before – caused socket.io to fallback to xhr polling) so it’s not the best server ever, but it does the job for the demo …

The source code is on github, it’s MIT licensed if you want to fork it or whatever.

I’m aware it’s not perfect (if you’re on multiple monitors, you may experiment little display differences), but it could lead to an idea of game or whatever …!

Tophe

Test Topheman Playground 2

PS : Besides of socket.io and little bugs I had to deal with (such as the express sessions linked to the sockets), this project forced me to learn how to publish a project on heroku, which is (when you never have done it before) not something as easy as uploading your files via ftp like you would for a php project for example 🙂 …

Continue reading →