McLab tools on the web Deepanjan Roy Supervisor: Prof. Laurie Hendren

Brief overview of the McLab project

LANGUAGES, COMPILERS, AND VIRTUAL MACHINES

Dynamic Scientific Programming Languages (Especially MATLAB)

Analysis tools

➔ ➔

McLab Static Analysis Framework Tamer: collection of even more awesome static analysis tools

Static compilers

➔ ➔

Fortran X10: IBM language for high performance computing

JIT compiler



McVM and McJIT: interpreter and optimizing Just-In-Time compiler supporting a non-trivial subset of MATLAB



Distributed and parallel computing

Programmer tools

➔ ➔



McNumJS: High perf JS library for numeric computations Pando: Large scale distributed numerical computing through a web browser Several other libraries and toolkits that help generate efficient parallel code for CPUs and GPUs

McLab Web (My COMP 400 project!)

Introducing MCLAB WEB

Right now all the tools are geared towards compiler researchers / highly technical programmers Majority of MATLAB users are scientists and engineers who want friendly tools

We are building a web based tool for McLab ➔ ➔ ➔ ➔

Clean and clutter-free interface It lives on the web: no installing packages, no OS incompatibility Instant updates - everyone is always on the latest version Auxiliary advantage: If people actually start using this tool widely, we can give them an option to share their code with us. That way we will build up a large repository of MATLAB code actually written by scientists and engineers, which is very useful for research purposes

McLab WEB: Version 0.1 Backend - Python/Django ➔ ➔



Runs McLab tools and relays analysis results Handles user uploaded zip files and serves file contents / directory tree Provides persistence and lightweight sessions

Frontend - React/Flux ➔ ➔ ➔ ➔ ➔

File explorer Code viewer with syntax highlighting Message terminal API for code highlighting using analysis results Base classes for panels

Two McLab functionalities as proof of concept Kind Analysis Compilation to Fortran

Analysis tools

➔ ➔

McLab Static Analysis Framework Tamer: collection of even more awesome static analysis tools

Static compilers

➔ ➔

Fortran X10: IBM language for high performance computing

JIT compiler



McVM and McJIT: interpreter and optimizing Just-In-Time compiler supporting a non-trivial subset of MATLAB

Live Demo

Implementation Details

Built on modern open source technologies React.js

Rendering application state to DOM

Flux

Managing data flow

Ace

Code Editor/Viewer

SuperAgent

Ajax library

Django

Backend Web Framework

The challenge, for the most part, is not hard algorithms and data structures It is writing code that is easy to reason about, and consequently easy to extend

Built on modern open source technologies React.js

Rendering application state to DOM

Flux

Managing data flow

Ace

Code Editor/Viewer

SuperAgent

Ajax library

Django

Backend Web Framework

Built on modern open source technologies React.js

Rendering application state to DOM

Flux

Managing data flow

React.js UI library built by Facebook https://facebook.github.io/react/

React.js philosophy Component

React.js philosophy Props State Component

React.js philosophy Props State render() Component render : (state, props) ⇒ UI Fragment

React.js philosophy props: color state: animal Component: AnimalBox render : (state, props) ⇒ UI Fragment

let box = box.setState({animal: “cat”})

React.js philosophy props: color state: animal Component: AnimalBox render : (state, props) ⇒ UI Fragment

let box = box.setState({animal: “dog”})

render : (state, props) ⇒ UI Fragment

Note how we’re mixing HTML with Javascript: JSX syntax

React acts as if at each render cycle, the part of DOM under its control is destroyed and recreated

If you change the state of the Root Level React Component, this is equivalent to doing a full refresh of the page

Of course this makes the code much easier to reason about, but destroying and recreating the whole DOM is slow

React solution: render to Virtual DOM Calculate the diff to get minimal set of changes Batch update the DOM with those changes

Data Flow How do you respond to user interaction? How do you communicate with the server, and render asynchronously loaded data?

Flux Architectural Pattern Introduced by Facebook, but many implementations https://facebook.github.io/flux/

Flux philosophy Every user action creates an action object

DISPATCHER

The action object is passed on to the Dispatcher

TerminalBufferStore

DISPATCHER

SelectedFileStore FileContentsStore

The Dispatcher passes on the actions to different stores

TerminalBufferStore

DISPATCHER

SelectedFileStore FileContentsStore

When a store changes its internal state in response to an action, it raises a change event

TerminalBufferStore

DISPATCHER



SelectedFileStore FileContentsStore

React components listen to these emit events, and recalculates their state when a store they are interested in changes

Store 1.1

DISPATCHER

Store 1.2 Store 1.3

Store 2.1 Store 2.2



React components listen to these emit events, and recalculates their state when a store they are interested in changes

Store 1.1

DISPATCHER

Store 1.2 Store 1.3

Store 2.1 Store 2.2



User interactions create new action objects and sends it back to the dispatcher to start another cycle

Developer Demo

Challenges Using non-react technologies with react components are not straightforward. Fortunately, react provides a lot of lifecycle methods that let you plug into different phases of the render cycle.

What I would do differently ➔ Implement backend in Javascript instead of Python ◆ Easy to move logic between client and server ◆ Much easier to do asynchronous processing (very hard to do non-blocking I/O in Python)

Future

Analysis tools

➔ ➔

McLab Static Analysis Framework Tamer: collection of even more awesome static analysis tools

Static compilers

➔ ➔

Fortran X10: IBM language for high performance computing

JIT compiler



McVM and McJIT: interpreter and optimizing Just-In-Time compiler supporting a non-trivial subset of MATLAB

Coming up next ➔ Linters for MATLAB code ➔ Code Profiling tools ➔ Integrate with McLab’s Javascript numeric computation libraries

Thank you!

McLab tools on the Web | Deepanjan Roy

McLab tools on the web - GitHub

highlighting. ➔ Message terminal. ➔ API for code highlighting using analysis results ... React.js. UI library built by Facebook https://facebook.github.io/react/ ...

405KB Sizes 5 Downloads 282 Views

Recommend Documents

McLab tools on the web - GitHub
Jan 6, 2016 - tools developed under the McLab project. This application is explicitly .... library developed by Facebook[5], and the Flux architecture pattern that complements React's composable. 4 ... Another option is to instead of selectively chan

web based - GitHub
I am nota developer! Hello, I'm Emil Öberg,. I am not a developer. ... Page 6 ... iOS old. iOS 8. Android old. Android 5. PLZ give tab bar ...

Programming Mobile Web - GitHub
Wordpress. Theme. Plugin. Joomla. Theme. Add on. Drupal. Module. Theme. More … Forum. Vanilla. esoTalk. Phpbb. More … More … Web server. Apache.

Hedgehog Tools Guide 2.4.0 - GitHub
The Hedgehog tools are a set of scripts that are used to perform various tasks in terms of creating and maintaining the database and hedgehog files on disk. They can be run directly from for convenience a wrapper script (. ) is provided: /libexec/hed

A Snapshot of the OWL Web - GitHub
OWL ontologies are used across a wide spectrum of domains, ranging from chemistry to bio-health ..... File name and file size patterns First, a random sample of 100 ontologies was repeatedly drawn from ... to be largely cluster-free. In order to ...

Cybercrime in the Deep Web - GitHub
May 14, 2016 - We are based on anarchistic control so nobody haz power certainly not power over the servers or. * - domains who ever says that this or that person haz power here, are trolls and mostly agents of factions. * - that haz butthurt about t

Very fast web traffic generator on a Tilera device - GitHub
Master thesis submitted for the degree of MSc in Computer Science .... The goal of this final year project was to develop a test-bed to evaluate .... Chapter 1. Event-driven network applications. Rusty interacts with the application layer through ...

Learn to Write the Realtime Web - GitHub
multiplayer game demo to show offto the company again in another tech talk. ... the native web server I showed, but comes with a lot of powerful features .... bar(10); bar has access to x local argument variable, tmp locally declared variable ..... T

HOW TO WEB DEV - GitHub
What devices will the application run on? • Will my application need a ... Java. Code. Java. Compiler. Android. App ... HTML is not a programming language.

Hands-On Exercises - GitHub
Nov 29, 2011 - Lecture 13: Building a Bioinformatics Pipeline, Part III ... Download protein sequences for the best blast hits from Swiss-Prot ... Download the file unknown1.fas and unknown2.fas from the class website. ... u1.seq[:10].tostring().

Planning in the Wild: Modeling Tools for PDDL - GitHub
converted to html by various hosting services (like GitHub or Bitbucket). mypddl-snippet ... [10] as well as general usability principles. .... received the web link to a 30-minute interactive video tutorial on AI planning and pddl. .... best practic

Processing Geo-Data using the OpenWebGlobe Tools - GitHub
All commands run on normal computers (regular laptops and work stations) and on high performance ... documentation/ dataprocessing. pdf . 1.1 Why Data ..... [date_time ]: creating LOD directory: process/bugaboos/tiles /10. [date_time ]: ...

rtGCS on GETAC - GitHub
Jun 12, 2015 - ... a few weeks is probably all you need to setup this demonstration. ... I am available to deliver rtGCS to your laptop and walk you through ...

Hands-On Exercises - GitHub
Nov 22, 2011 - Lecture 12: Building a Bioinformatics Pipeline, Part II. Paul M. ... have shown that it is amongst the best performing multiple ... See the MAFFT website for additional references ... MAFFT v6.864b (2011/11/10) ... Once you've confirme

The Web Browser Personalization with the Client Side ... - GitHub
Thanks to social network services, our daily lives became more ... vices is to exchange them with one of authorization protocols such as OAuth 4. Through a ...

Lifting the Fog on RedStar OS - GitHub
Dec 27, 2015 - https://blog.whitehatsec.com/north-koreas-naenara-web-browser-its-weirder-than- .... /lib/modules/2.6.38.8-24.rs3.0.i686/kernel/fs/rtscan.ko. ¬.

web development tools pdf
web development tools pdf. web development tools pdf. Open. Extract. Open with. Sign In. Main menu. Displaying web development tools pdf.

Web Interface Integrating Jeopardy Database - GitHub
Page 1. Web Interface Integrating Jeopardy Database. School of Information, The University of Texas at Austin. Anuparna Banerjee, Lindsay Woodward, Kerry Sim. ○

Monadic Development for the Web Using RxJS and React - GitHub
Monadic Development for the Web. Using RxJS and React ... webrx-react is a single page application web framework written in TypeScript that aims to reduce ...

Toward the Web of Functions: Interoperable Higher-Order ... - GitHub
enabling a generation of Web APIs for sparql that we call Web of Func- tions. The paper ... Functions with a Remote Procedure Call (RPC) approach, that is, users can call ...... tional World Wide Web Conference, WWW (Companion Volume).

On Keyboards and Things... - GitHub
The problem with this is that bigrams like ST would jam the typewriter by ... Issues with QWERTY. Many common letter .... 2 Change layouts on your computer.

Entity Recommendations in Web Search - GitHub
These queries name an entity by one of its names and might contain additional .... Our ontology was developed over 2 years by the Ya- ... It consists of 250 classes of entities ..... The trade-off between coverage and CTR is important as these ...

Security Testing of Web Applications - GitHub
Agenda. Security Testing, Web Application, and Web Security Testing ... A3: Broken Authentication and Session Management ... (distributed denial-of-service) ...

Engineering the Servo Web Browser Engine using Rust - GitHub
browser engine, Rust, Servo, concurrency, parallelism. 1. INTRODUCTION .... grams, Rust programs are memory safe by default, only allowing ..... that in the more than two years since Servo has been under devel- opment ..... Technical Report.