The conference web app is a mobile application for delegates to use during a conference on their mobile devices--either company provided or personal. It replaces printed dossiers and schedules while adding significant additional functionality such as word clouds and messaging. It was designed specifically for the 2015 Operations Conference and meet those requirements. It is a node.js based web application that leverages client browser capabilities to minimize bandwidth requirements and is designed for ease of cloud deployment using AWS Elastic Beanstalk and AWS DynamoDB.
The conference web app is a full-fledged web application making use of the latest technologies to ensure good performance while leveraging the power of client-side devices. Once logged in, the web app is actually a single web page design that appears to be multiple pages and uses jQuery Mobile to achieve this. The application stack is as follows:
- jQuery Mobile (HTML5 user interface system)
- D3.js (data visualization)
- Passport.js (authentication middleware)
- Vogels (asynchronous object modeling)
- Jade (template engine)
- Express.js (web application framework)
- Node.js (runtime environment)
- Elastic Beanstalk (cloud platform)
- DynamoDB (document store)
It is recommended that you fully familiarize yourself with this technology stack before updating the web app. The bulk of the updates can simply be done to the jade templates. There is a single template for the content of each page to make updating easier. However, changes to the database structure will require additional updates to the local-tools, models, routes and client-side JavaScript.
.
├── .ebextensions
│ └── 01run.config (elastic beanstalk configuration file)
├── bin
│ └── www (node.js configuration)
├── local-tools (tools to create/populate database; do not upload to server)
├── models (dynamodb data models)
│ ├── account.js
│ ├── delegate.js
│ ├── schedule.js
│ └── survey.js
├── node-modules (local copies of node.js modules; do not upload to server)
├── passport
│ └── passport.js (user authentication)
├── public (static client-side files)
│ ├── images
│ │ ├── content (other images)
│ │ ├── delegates (delegate pictures 80x80)
│ │ ├── icons-els (Elsevier logo sized for various platforms)
│ │ ├── icons-png (jQuery Mobile button icons)
│ │ └── icons-svg (jQuery Mobile button icons)
│ ├── javascripts
│ └── stylesheets
├── routes
│ └── routes.js (express.js routing)
├── views (jade templates to render HTML)
│ ├── error.jade (error message)
│ ├── index.jade (primary template will "include" all the other templates except error.jade and login.jade)
│ ├── login.jade (login screen)
│ └── ... (templates for page content, footer and navbar)
├── main.js (primary server-side script)
├── package.json (node.js modules included in the app)
└── README.md (this file which is in markdown format)
Install node.js on your computer. Sign up for an AWS account through RETS. Contact the the Security team.
How to configure Elastic Beanstalk
Turn on DynamoDB in AWS console
Use tools to create and populate databases with data in JSON files. Link to CSV to JSON converter
Spacing is critical. Link to info on syntax.
navpanel.jade and footer.jade are included on each page. These can be edited but be sure to update the highlighting in the conference.js file.
Links to info
Explain how the client side events work
The color scheme is based on Elsevier's branding colors and images. It can be changed using theme roller but will require significant work as some tags in the Jade templates to indicate specific themes (e.g., data-theme="b").
Explain how the routing works
Info on configuration. No direct registration. Can be enabled but would require enabling password reset, AWS email functionality and restriction to certain domains.
Leverage D3.js