Together
Application for simultaneous photo viewing.
All actions made by any of viewers (like going to next photo or open photo list page) are immediately duplicated in browsers of all other viewers.
Using
Motivation
Once a friend of mine vent to long vacation. He wanted to share some photos and comment on some of those. We started a skype conversation with screen sharing but video quality was pretty bad. This application allows to show all photos from directory and synchronize actions of viewers. Say when friend goes to next photo the same photo is shown to me. So he can tell me about that photo on skype without having issues with video quality. I can also go to any photo that is interesting for me and ask him to tell about that one. My actions will be synchronized to him as well.
Please note I'm not considering this as a serious application, more like playground to learn javascript and node.js.
Installation
npm install @dimasmith/together
Running
Command line client is provided for package.
Note that in order to serve properly you need to run
it either from installed module directory
(node_modules/@dimasmith/together) or specify this directory
as --cwd parameter. This annoyance is scheduled to be fixed in upcoming versions.
Assuming you are in node_modules/@dimasmith/together. Start application with
together <path-to-dir-with-photos>You may change server port using -p parameter.
Use together -h to see all configuration options.
Development
Application consists of two bundles. Client bundle with all code served in browser and server side code that provides serving photos and communication.
Bundles are built with webpack.
- client bundle ->
dist/client.bundle.js - server bundle ->
cli.js
Both bundles are using some common code placed in common directory.
Notable libraries and approaches
Client side utilize redux for state management. View layer is made with ampersand. sass and jade used for styling and templating respectively. CSS is intended to follow BEM.
Express used on server side covered with webpack dev server for development mode.
Client-server communication made using websockets backed by Socket.io
Code layout
-
client-> all client code that is delivered into browser -
server-> server side code compiled into cli runner -
common-> packages used by both client and server. Mostly communication related -
assets-> for static assets like images
Code style
Code style is checked with jscs using preset for Airbnb code style.
All code is transpilled using babel. ES2015 features used.
Tests
Several test are available. Using mocha + chai
Use npm test to run it.
Preparation
Clone repository using git clone https://github.com/dimasmith/together.git
Install all necessary modules with npm install
Add sample photos
Create directory photos inside source (it is added to .gitignore).
Add some photos you want to work with.
You may also create symlink instead of placing directory.
Starting
npm start will start server wrapped by webpack dev server.
Dev server is set to recompile client code once you changed any file.
Dev server is accessible on http://localhost:9000 (you can change
port by setting DEV_SERVER_PORT environment variable)
Normal server is available on http://localhost:8000
Compilation
Code compiled for production is packed in slightly different manner. Most notable things are minification of images and uglifying javascripts so bundle is much smaller.
To check compiled code you need to build client bundle using npm run-script compile.
Then start your development server as usual with npm start and go to
http://localhost:8000 It will serve precompiled scripts.
Just the same way command line client will do.