Weather and Google calendar dashboard built with React & Flux
Screenshot:
To build, make sure you have the latest version of Node installed. Node is just used for package management and to ease local development. If you've never used Node before, it's a quick install and there are installers for multiple platforms, including Windows, Linux and OSX.
Yarn is used for dependency management. Webpack is used for bundling and workflow. If you don't have these installed, just run:
npm install -g yarnpkg webpack
After cloning the repo, run the following commands in the project directory to get the required Javascript package dependencies and build the bundle.js
file:
yarn
webpack -w
This will also watch your local system for any changes. If you make changes to any referenced components, the bundle.js
file will automatically be rebuilt.
For a production-use minified bundle.js, run the following command:
webpack --optimize-minimize
I recommend getting Sublime Text (with the ReactJS plugins) to edit your source code locally. Sublime does a great job with lots of different formats and with the React plugins it does a great job of formatting your components.
You can get away with just opening local files in a browser for simple prototypes, but once you start calling external API's, running a local web server is a requirement. I recommend http-server. Setting it up is a snap once you have node installed. Just run the following from a command line:
npm install http-server -g
To start the server, navigate to the root of the project directory and type:
http-server
This will start a server at http://localhost:8080 that serves content from your project directory.
When making changes locally, I recommend you have another command line window open automatically building bundle.js for you when you make changes.
Navigate to the project directory and type:
yarn
webpack -w
The app is constructed using ReactJS and the Flux architecture.
ReactJS is a new way of designing user interfaces on the web, written by the Facebook Engineering team. React lets you compose your UI with a collection of components. If you're new to React, the thinking in React tutorial is a good place to start.
Flux is a way of passing data around a web app. In our case, we use Flux on the client side -- since this is a single page app.
Flux is best illustrated with this diagram:
A unidirectional data flow is central to the Flux pattern, and the above diagram should be the primary mental model for the Flux programmer. The dispatcher, stores and views are independent nodes with distinct inputs and outputs. The actions are simple objects containing the new data and an identifying type property.
Basically React = UI and Flux = data flow. Following the diagram, above ...
Piece | Found in these source files |
---|---|
API utils | Found in js\utils. These fetch data using an Ajax call and pass it to an Action. |
Actions | Found in js\actions. Actions are the entry point for data in the system. |
Dispatcher | Found in js\dispatcher\AppDispatcher Taken verbatim from the Flux repo. Take a look at it. It's pretty simple. It the app it just works as the 'spine' -- sending data from actions to stores that have asked for it. |
Stores | Found in js\stores. Stores manage the state of one type of data. When that data is updated, they let any interested parties know about it. Stores also provide helper methods to get to their data. |
Views | Pretty much everything under js\components. These are all React comopnents. The app is DashboardApp.react. The two main pages are DashboardHome and DashboardSettings. Everything else in that directory is a UI component that makes up the main dashboard screen. |
There are 2 major data sources for the app: Forecast.io and Google calendar. To make things a bit more straightforward to access, I have created 2 microservices that the app calls. These microservices then fetch (and cache) data as needed:
Service | Description | Found here |
---|---|---|
forecast-service | Gets weather and pollen information | https://github.com/danesparza/forecast-service |
calendar-service | Gets Google calendar information | https://github.com/danesparza/calendar-service |