Composable EmberJs 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 EmberJS be used to facilitate this interaction and create a customized dashboard.

Why Ember JS Why is EmberJS 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, AngularJS and Ember.js. Backbone lacked too many features We were left with choosing between AngularJS and EmberJS

Ember.Js versus AngularJS Templating: Ember’s handlebars wrap around HTML whereas AngularJS directives extend HTML elements Extending HTML elements restricts how you can iterate data. You end up transforming data in the controllers DataModels: 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 AngularJS Components: Ember Components are simpler and more modular than AngularJS directives. Using Ember PODS each component can have its own CSS, Javascript and templates AngularJS directives only allow DOM manipulation. Tooling: EmberJS 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 AngularJS, there is no ingrained support – and you have a lot of choices, which can make AngularJS codebases vastly different

Auto Updating Template What is ember.js ? Open source client side JavaScript 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 Open Source Client Side MVC Based Scalable Single Page Apps Uses Common Idioms Declarative Two way data binding Auto Updating Template Router

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

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 Publish Report Search / Discovery Develop Idea Design Study Collect Data Store Data Analyze Data Write Report Who’s Mission IS: Increase openness, integrity, and reproducibility of scholarly research But … Non-profit, 50 employees, 26M

OSF 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 EmberJS binding to the models for REST API

The Craft App The Craft App uses EmberJS, the OSF API and a Backend OSF server

Craft and the OSF Architecture Front End Craft application In Client’s browser EmberJS 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