Building web applications that can stand the test of time has always been tough. Web technology in particular is a rapidly changing landscape with new fads emerging frequently, that often leaves us with a outdated and unused application that needs to be rewritten at considerable effort and cost. With a common component based approach we can change this costly cycle of rebuilding every few years, by leveraging existing frameworks and web technologies that will allow us to create interchangeable Web Components that work in any environment. Although Web Components do pretty much what can be done with custom HTML, CSS and JavaScript, the distinct difference is it can be re-used more easily. In combination with a chosen technical framework, if done right, can provide the front-end to a component based architecture that allows to pick and choose the parts that we want to build our web application with, therefore reducing ongoing costs and effort, and increasing reusability, shareability, and quicker time to market to address users needs. This presentation will talk about the building blocks that will help to realise this reusable front-end vision including: standards (SDMX, CSPA); technologies; and Collaboration, through a community based approach to software development.

1. International Marketing And Outputs DataBase Conference
Paris, France
18-22 October 2015
Prepared and presented by Jonathan Challener, OECD
The building blocks for a reusable front-end

2. The building blocks for a reusable front-end
WHAT PROBLEM ARE
WE TRYING TO SOLVE?

3. The building blocks for a reusable front-end
Many web based applications

4. The building blocks for a reusable front-end
Varying
technology
stack

5. The building blocks for a reusable front-end
Doing the same thing but different application

6. The building blocks for a reusable front-end
Lacking reusability

7. The building blocks for a reusable front-end
Solution

8. The building blocks for a reusable front-end
Web Components
Templates
HTML imports
Custom elements
Shadow DOM
Source: w3c (https://w3c.github.io/webcomponents/)

9. The building blocks for a reusable front-end
What is a Web Component?
Web Components are a set of standards currently being produced as
a W3C specification that allow for the creation of reusable widgets or
components in web documents and web applications. The intention
behind them is to bring component-based software engineering to
the World Wide Web. The components model allows for
encapsulation and interoperability of individual HTML elements.
- From Wikipedia, the free encyclopedia

10. The building blocks for a reusable front-end

11. The building blocks for a reusable front-end
Can be used to build
something simple

12. The building blocks for a reusable front-end
Or together create a
complete application

13. The building blocks for a reusable front-end

14. The building blocks for a reusable front-end

15. The building blocks for a reusable front-end

16. The building blocks for a reusable front-end

17. The building blocks for a reusable front-end
Joint project: Framework for reusable web components

18. The building blocks for a reusable front-end
High Level Scope
To define a framework for the creation of a
toolbox of data portal browser components,
and design, build and implement a number
of the defined web components.

19. The building blocks for a reusable front-end

20. The building blocks for a reusable front-end
Chart
library
Table
library
Calc
library
Theme
library
DISPLAY
Browser
template
Registry
GUI
.Stat db
WS
WS
SDMX API (physical structures: XML, JSON, CSV, RDF;
soap features limited to rest features)
WS
.Stat db
WS
Registry &
Mapping
db
GUI & CLI
(incl. MA
component
and Registry)
WS
DSDformapping
Mappings
Generic mapping to/from specific DSDs
SDMX (virtual & physical structures : XML, JSON, CSV, RDF)FromSDMX-RI
.Stat db abstraction layer: REST with GET, PUT, DELETE
Architecture vision *DRAFT*
External data
producer/consumer
From.Statws
andEG

21. The building blocks for a reusable front-end
Realising our vision

22. The building blocks for a reusable front-end
Workshops with industry experts
Possible solutions
available on the market,
technical
recommendation,
approach!

23. The building blocks for a reusable front-end
Proof of Concept

24. The building blocks for a reusable front-end
Pick a partner?

25. The building blocks for a reusable front-end
V
Approach?

26. The building blocks for a reusable front-end
Guiding principles
• CSPA compliant
• Consume RESTful service
• Statistical applications
SDMX based service
• SOLID Design principles
• Provisions for stateful
approach
• Run stand-alone

27. The building blocks for a reusable front-end
Guiding principles
• Style independent
• Inherit styles from
parent page/application
• Client-side framework:
• Eases event
management and
templating
• Strong and active
community

28. The building blocks for a reusable front-end
Project timeline
July
2015
August
2015
September
2015
October
2015
November
2015
ToR defined
Workshops
Analysis
PoC
“Draft”
Framework
definition
PoC defined
Launch of
UIS DP
project
ATF review
Creation of
components
December
2015

29. The building blocks for a reusable front-end
Proof of Concept

30. The building blocks for a reusable front-end
V
Approach?

31. The building blocks for a reusable front-end
Deemed too “heavy”
Version transition > Not stable.
Not Angular?

32. The building blocks for a reusable front-end
PoC technical stack

33. The building blocks for a reusable front-end
GOAL!

34. The building blocks for a reusable front-end
Key criteria
Cross-browser support
Performant

35. The building blocks for a reusable front-end
PoC implementation

36. The building blocks for a reusable front-end
PoC implementation

37. The building blocks for a reusable front-end
PoC implementation

38. The building blocks for a reusable front-end
WHAT’S NEXT?

39. The building blocks for a reusable front-end
Define Web Component Architecture

40. The building blocks for a reusable front-end

41. The building blocks for a reusable front-end

42. The building blocks for a reusable front-end

43. The building blocks for a reusable front-end
.Stat > .Stat v2?

44. The building blocks for a reusable front-end
Table Component

45. The building blocks for a reusable front-end
Selection Component

46. The building blocks for a reusable front-end
Chart Component

47. The building blocks for a reusable front-end
Document ‘reusable web components ‘definitions
what it does
what information it consumes
events it listens to
output it produces
events it generates

48. The building blocks for a reusable front-end
I want to build a new web application?
I want to build a data portal?
I want to create a visualisation using SDMX-JSON API?
I want to embed a dynamic data table in my web page?
…
Faster time to market

49. The building blocks for a reusable front-end
Questions to address?
Governance
Licencing (Free, OpenSource…)
Maintenance
Lifecycle (Components, Interfaces…)

50. The building blocks for a reusable front-end
Credits
This presentation includes contributions from:
Bertrand Rivere
Bruno Urban
Nicolas Briemant
Nicolas Vahlas
The .Stat team at UNESCO Institute for Statistics

51. The building blocks for a reusable front-end
Jonathan Challener
Project and Collaboration Community Manager
Organisation for Economic Co-operation and Development (OECD)
Email: jonathan.challener@oecd.org
LinkedIn: fr.linkedin.com/in/jonathanchallener
Twitter: @Challener
Web: siscc.oecd.org
Stats: stats.oecd.org

52. The building blocks for a reusable front-end