Composable Ember Js Dashboards Using OSF Ian Taylor

Composable Ember. Js Dashboards Using OSF Ian Taylor & Jarek Nabrzyski, University of Notre Dame, Ian. J. Taylor@nd. edu naber@nd. edu

Overview • We have a number of projects requiring a Dashboard • Various backend APIs that seem relevant • Lots of Web front end toolkits – which one allows rapid & reusable development with backend API integration ? • Use case: – Have a military project which is tying to reduce the timeline for creating customized integrated chips – And the Open Science Framework API, which is a framework to support the research lifecycle and open data • How can Ember. JS be used to facilitate this interaction and create a customized dashboard.

WHY EMBER JS Why is Ember. JS interesting in the first place?

Why Ember. Js ? • We wanted a SPA (Single Page Application) framework • • A Web app that acts like an application, not a set of web pages Fully portable to mobile devices – no need for native mobile development • We looked at Backbone. js, Angular. JS and Ember. js. • Backbone lacked too many features • We were left with choosing between Angular. JS and Ember. JS

Ember. Js versus Angular. JS • Templating: Ember’s handlebars wrap around HTML whereas Angular. JS directives extend HTML elements • Extending HTML elements restricts how you can iterate data. You end up transforming data in the controllers • Data. Models: Ember’s data models provide a great abstraction to APIs. Similar to Django models but on the front end. • No need to interact with REST interface directly • Multiple bindings to REST interfaces • Angularjs lacks good data integration

Ember. Js versus Angular. JS • Components: Ember Components are simpler and more modular than Angular. JS directives. • • Using Ember PODS each component can have its own CSS, Javascript and templates Angular. JS directives only allow DOM manipulation. • Tooling: Ember. JS tooling minimizes complexity • • No third party tools e. g. Gulp, Browserify. Etc Generators for all Ember components You just need NPM and you can create an app. With Angular. JS, there is no ingrained support – and you have a lot of choices, which can make Angular. JS codebases vastly different

What is ember. js ? Open Source Client Side MVC Based Scalable Single Page Apps Uses Common Idioms Declarative Two way data binding Auto Updating Template Router • Open source client side Java. Script web application framework • Ember runs in a user’s browser • Used to develop single page applications – SPAs • The increase in reusability by the use of common idioms increases productivity • Integrated templating using handlebars – wraps around html

WHAT IS OUR USE CASE? The Craft Project (Chip Design) meets The Open Science Framework !

The CRAFT Project What is CRAFT & Our Role? • Main goal – to apply automation to enhance the productivity of ASIC designers (speeding up the processes of verification, reuse of design components) • Working with a variety of teams, tools and IP, with potentially different needs, respecting privacy concerns • To develop a community repository to host IP components and tools, and facilitate design flow composition • • • Need to document and share design flows And associated metedata about the flows And need a collaborative space for development of ideas

The CRAFT Project We need to support flows like this: Source (VHDL / Verilog) Functional Verification Cadence Incisive Simulator Verified RTL Synthesis Synopsys Design Compiler Netlist Timing Analysis Place and Route Backend Checks (DRC, LVS, etc) Ready-to-Fab Chip Layout Synopsys Primetime Cadence 1 st Encounter Layout Mentor Calibre Verified Layout ASIC Design Test Vectors Libraries Timing Constraints Cadence Conformal Logical Equivalence Check Foundry PDK, Rule Decks, etc

CRAFT Requirements • A projects forms the basis of a CRAFT collaborative space. – should contain a wiki, tags, file browsers, comments, audit trails, data analytics, and so on. – Sub-projects can be created to allow hierarchical organization of CRAFT programs of research and performers • Each project has a project leader (project admin e. g. the PI could be a project admin) – can manage that particular project and its sub-projects. – can invite collaborators to their project and assign them certain privileges. • Projects can be open or closed

Why Use the OSF? The Open Science Framework, on the other hand, is a Web-based collaborative environment for the Future of Open Science Who’s Mission IS: Publish Report Write Report Increase openness, Analyze Data integrity, and reproducibility of Store scholarly research Data But … Search / Discove ry Develo p Idea Design Study Collect Data

Why Use the OSF? • OSF Has a lot of tools integrated • And integrated wiki, tags, file browsers, comments, audit trails, data analytics, OSF Planned • And a full REST API – Django REST Framework • And an Ember. JS binding to the models for REST API

THE CRAFT APP The Craft App uses Ember. JS, the OSF API and a Backend OSF server

Craft and the OSF Architecture Front End Craft application In Client’s browser Ember. JS models provide a Javascript interface to the REST API The OSF backend provides the collaborative space (projects) and API for authentication, authorization, files, comments, audit trails, search and versioning

Combing OSF, REST API and Craft App

The Craft App

The Craft App

The Craft App

The Craft App

The Craft App

Questions? • And thanks to: – DARPA for funding the RACE Repository as part of the CRAFT program – COS: • Jeff Spies for the vision and making this possible • Sam Chrisinger – for the help with the Ember OSF implementation • Matt Vander Werf, Caleb Reinking & Antelmo Aguilar for installing OSF at ND. – Collaborators at USC/ISI • Ewa Deelman, Sandeep Gupta, Rafael Ferreira da Silva & Karan Vahi – And programmer team • Charles Williams, Alexander Vyushkov and Keith Hostetler