Project TimbitDiving into a new web development paradigmAugust 17, 2011 - Presented By Edward De Groot, Director Of The Postmedia Digital Innovation Team
Introduction✤ Postmedia’s Digital Innovation Team is ﬁnally up and running✤ We are not about building new frameworks for CMSs but... ✤ Need a platform to quickly build new prototypes and functionality ✤ Want to assist the Professional Services team in expediting development, testing and deployment of widgets and templates ✤ Need something to keep us busy and out of trouble ✤ Want to contribute to the web development community✤ You are encouraged to comment and/or ask questions
Widget #1The I/O Problem Widget #2 Widget #5 Widget #3✤ Widgets are typically rendered synchronously, one at a time✤ A few slow widgets can cause Widget #4 signiﬁcant delay for the page✤ (Too) many widgets, fast or slow, will delay the page Widget #6 Widget #7 Widget #8
The DigitalMedia Problem✤ Most digital media sites are (overly) content heavy✤ Most incorporate (too much) content from many different sources on a single page✤ e.g. canada.com home page ✤ Built utilizing over 100 widgets. ✤ 80+ feeds from our CMS alone ✤ It’s not alone.
Possible Solutions✤ Utilize caching wherever and whenever possible ✤ Already do that via Akamai, MemCached, etc. (That’s why canada.com, as big as it is, still renders on the server in < 1s on average)✤ Reduce number of widgets / page size ✤ Ideal, but we will always be somewhat content heavy✤ Render widgets in parallel! ✤ Both obvious and promising...
ESI to the RescueWidget #1 Widget #2 Widget #3 Widget #4 Widget #5 Widget #6 Widget #7 Widget #8✤ Edge Side Includes (ESI), available via our CDN (Akamai) can help✤ ESI will allow us to render most widgets in parallel✤ Postmedia DM released support for ESI / Remote Widgets this week!✤ (We don’t have any remote widgets.... yet)
Better, but not Great.✤ The majority of widgets render data from remote data sources (Databases, REST APIs, etc.)✤ I/O calls introduce signiﬁcant latency✤ Therefore, most widgets, under load, spend most of their time waiting for data✤ In concurrency-based, multi-threaded applications with signiﬁcant I/IO, high loads will result in most threads being blocked. The result? ✤ High CPU/memory utilization (signiﬁcant context switching) ✤ Low throughput (lot’s of blocking) ✤ High request queuing
The Main Event✤ Event-Driven architecture solves the I/O latency issues.✤ Much better at handling high number of concurrent users✤ Much better memory efﬁciency under high loads✤ No dead-locking, as there are no locks, no blocking calls.✤ As such, a widget can continue to service new requests while waiting on I/O for other requests.
Magic!✤ Pantry - A JSON/XML resource caching library✤ Timbits - Widget framework on Express and CoffeeScript✤ kitkat - Kontinuous integrated testing koffee application template✤ connect-esi - Edge Side Includes tag processor for the connect framework✤ Samples - Including an HTML5 based Story widget with multi-device rendering support (Browser, Tablet, Phone)✤ All of these projects are open source!
TimbitsWidget framework on Express and CoffeeScript✤ Built on top of some maturing Node.js packages ✤ Connect.js - Middleware framework for node.js ✤ Express.js - Sinatra inspired web development framework ✤ CoffeeKup - HTML templating engine based on CoffeeScript✤ Makes it easy to build an API consuming, data rendering widget.✤ By default, it utilizes Pantry for all data consumption✤ [DEMO]
kitkatKontinuous integrated testing koffee application template✤ An automated testing framework for node.js and CoffeeScript✤ Will automatically run tests when the project changes✤ Integrates with Growl✤ Convention over conﬁguration✤ Includes spec generation (single, all, and automatic)✤ [DEMO]
connect-esiEdge Side Includes tag processor for the connect✤ Main purpose (today) is to assist in testing widgets✤ Only basic ESI support so far ✤ esi:include (including nested) ✤ variables such as $(HTTP _COOKIE), $(QUERY_STRING) etc.✤ [DEMO]
Going Forward✤ You can begin building widgets using Timbits today✤ Moving towards stable, production ready v 0.2 of all libraries✤ Planning new features, such as ✤ Better error handling and documentation (all) ✤ Scaffolding (timbits) ✤ Optional client side rendering (timbits) ✤ Support for Redis (Pantry) ✤ Windows Development Support (all)
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.