Live Coding a Webapp for the Cloud

Joel Klein, Wolfram Research

Join the Conversation #WolframTechConf

Goals

Livecoding: something different, show thought process

Build a simplified form of familiar type of webapp

Build a suite of functions that create the webapp, meaning it can be re-used to redeploy different versions.

Minimal viable product; leave obvious but non-essential features as exercises for the reader (e.g. RSS feed for a blog)

Beyond the talk: develop a stable of “kits” that can be studied, copied, customized

Develop a theory of what’s common to webapps

Types of Webapps

• blog - user creates posts, served in reverse chronological order.
• online store - users browse products, put them into a shopping cart, and place an order.
• event invitation - users create an event, send invitations, and the system tracks responses
• surveys - users can create surveys and distribute them for taking, and then view results (a variation on event invitation).
• online petitions -- users submit and sign petitions
• classified ads -- users post ads in categories
• forum - users start discussion threads, usually divided into topics.
• social media - users associate with each other and share content presented in a stream
• news aggregator - users submit links (news) and vote on what links they like. The frontpage sorted by a combination of most popular and recent.
• game portal -- users get matched up with against others to play a game (e.g. chess)
• chat client -- users type messages that get displayed sequentially in real time
• mailing list manager -- users maintain a mailing list (think MailChimp or Constant Contact) and then send “email blasts” to the list.
• matching - users create profiles to make connections, e.g. teachers and students, dating
• encyclopedia -- user-edited reference site
• crowdfunding -- users submit project or product pitches, readers vote or fund pitches

Method

Requirements; decide on necessary features

Rough out the workflow (state machine, with home page as start state)

Model: data

View: presentation of data and transitions (links, buttons)

Controller: functions and web endpoints

Let’s Get Started!

TODO: pick webapp
TODO: implement webapp here

Resources

Follow-up at https://www.wolframcloud.com/objects/jfklein/BuildingWebapps/Home.nb

Common Tools

create a directory for the webapp

use cloud object for root directory of webapp, build links there, make all functions accept the root as an argument

$root=CloudObject["myApp"]

create a home page under the directory (in future, there will be something like index.html where the directory will serve the home page automatically)

AppLink[dir_CloudObject,name_String]:=FileNameJoin[{dir,name}]
AppHome[root_CloudObject]:=AppLink[root,"Home"]
AppData[root_CloudObject]:=AppLink[root,"data"]

$home=AppHome[$root,"Home"]

For notebook-based interfaces, an Output cell with a StandardForm version of the expression is useful.

outputCell[expr_]:=Cell[With[{inner=Pane[expr]},MakeBoxes[inner]],"Output"]