Better demos · Issue #96 · jquery/jqueryui.com (original) (raw)

(ported from planning wiki)

General Ideas/Requirements

• We need to be able to update demos independent of the code. Currently we have to make a new regular release in order to update demos on the website. That sucks. Based on that we should consider moving demos into the site repo.
• It would be interesting to make demo code interactive. That could happen by integrating jsbin (a link that opens the demo on a new jsbin, ready to run and edit). Or we could make the source section editable, using codemirror.
• Once we have demos that touch multiple widgets, there should be a way to filter demos to show those where a single widget is used. For example selecting "slider" and "accordion" would show only those demos that feature both those widgets.
• Demos should be editable, avoiding the need to manually copy the code. This could be integrated with jsbin.com, where a bin is automatically created using the code of the demo.

Individual widgets

Currently our demos mostly consist of show casing each individual option. That should be part of the API documentation (if necessary at all), while demo show actual examples - something a developer would use in a site or application.

Kendo UI does a pretty good job with their demos, we should take some inspiration there.

Composite demos

We need a few composite demos, that show a combination of widgets in a real-world scenario.

Scenarios include:

• Booking a flight online would be a great demo for jQuery UI, featuring both autocomplete (eventually selectmenu) and datepicker at their best.
  • A good reference: https://wizzair.com/en-GB/Search - note how it assumes One Way until you choose a return date, with a customized jQuery UI datepicker pointing that out.
• [others]

Composite Demo Sample:

• Online Flight Booker: Repo - Demo Page

jsbin.com integration

Mentioned above already, here's some more details:

• When jqueryui.com is deployed, it would create bins for all demos, preferably using an official API (not available, yet)
• Each demo then has a link to jsbin, something like a "Edit on jsbin" button, that opens the already existing bin.
• Once the user starts editing that bin, a unique clone is created, so that they have their own copy.