文件列表:

Docs/ (0, 2017-09-08)
page.jpg (129599, 2017-09-08)
app/ (0, 2017-09-08)
app/index.html (465, 2017-09-08)
app/models/ (0, 2017-09-08)
app/models/user.js (614, 2017-09-08)
app/routes.js (2273, 2017-09-08)
config/ (0, 2017-09-08)
config/database.js (98, 2017-09-08)
config/passport.js (1991, 2017-09-08)
frontend/ (0, 2017-09-08)
frontend/actions/ (0, 2017-09-08)
frontend/actions/code_actions.js (1177, 2017-09-08)
frontend/actions/error_actions.js (270, 2017-09-08)
frontend/actions/metric_actions.js (800, 2017-09-08)
frontend/actions/session_actions.js (1520, 2017-09-08)
frontend/actions/user_actions.js (795, 2017-09-08)
frontend/components/ (0, 2017-09-08)
frontend/components/app.jsx (1598, 2017-09-08)
frontend/components/code_input/ (0, 2017-09-08)
frontend/components/code_input/code_input.jsx (23275, 2017-09-08)
frontend/components/code_input/code_input_container.js (1418, 2017-09-08)
frontend/components/code_input/code_modal.jsx (1322, 2017-09-08)
frontend/components/code_input/save_modal.jsx (1187, 2017-09-08)
frontend/components/home/ (0, 2017-09-08)
frontend/components/home/home.jsx (363, 2017-09-08)
frontend/components/home/home_container.js (260, 2017-09-08)
frontend/components/metrics/ (0, 2017-09-08)
frontend/components/metrics/metrics.jsx (1946, 2017-09-08)
frontend/components/metrics/metrics_container.js (302, 2017-09-08)
frontend/components/navbar/ (0, 2017-09-08)
frontend/components/navbar/login.jsx (1640, 2017-09-08)
frontend/components/navbar/navbar.jsx (3507, 2017-09-08)
frontend/components/navbar/navbar_container.js (831, 2017-09-08)
frontend/components/navbar/signup.jsx (1794, 2017-09-08)
frontend/components/root.jsx (285, 2017-09-08)
frontend/components/stackframes/ (0, 2017-09-08)
... ...

# PourOverJS [heroku]: http://pouroverjs.herokuapp.com [PourOverJS][heroku] is a `JavaScript` profiler and code editor. It outputs performance metrics for the submitted code and displays a step-by-step stack frame visualization. Users can also save code snippets to the database.  ## Overview of Features PourOverJS is a web application built using the MERN (MongoDB, Express.js, React.js-Redux, Node.js) stack. The following features are implemented - [x] Authentication - [x] Online code editor - snippets can be saved to database - [x] Syntax highlighting and auto-indentation - [x] Three example code snippets available to demonstrate functionality - [x] Five performance metrics are displayed after users click "Compile": - Execution Time - Return value - Total function calls - Function chain (demonstration of closure) - Variables declared in each scope - [x] Users can step through code and visualize call stack ## Technologies - FRONT END: - React.js with Redux - BACK END: - Node.js - Express.js - MongoDB - NPM PACKAGES/OTHER LIBRARIES: - Webpack(bundle) - Nodemon(server refresh) - BodyParser(mongodb response parser) - BCrypt/SCrypt(password encryption) - Babel(ES6 to ES5 syntax transformation) - Esprima(Abstract Syntax Tree transformation) - Etraverse(Abstract Syntax Tree injection) - Local-storage(session storage) - Mongoose(MongoDB connection) - Passport(User authtication) - Regenerator(ES6 to ES5 syntax transformation) - React-Ace(Browser code editor) ## Features and Implementation ### Authentication Users can create an account and log into our site. They can save any code snippets and associated analyses to our database for later perusal. ### Call Stack Visualization When the user clicks "Compile", the code in the editor, taken as a String, is converted into an abstract syntax tree using Esprima, which is a popular JavaScript parser: ```js let ast = esprima.parse(this.code, {loc: true}) ``` Then, the AST is traversed to using Estraverse to identify expression statements and push them into a stack for later. These push statements are injected throughout the snippet: ```js parent.body.splice(parent.body.indexOf(node), 0, esprima.parse(`stackPourOver.push( ['${level.name ? level.name : (level.property ? level.property.name : level.property)}', ${node.loc.start.line}])`)) ``` Information about the starting and ending line numbers of function declarations are also collected to determine which stack frames each expression statement belongs to, if any: ```js arr.push(esprima.parse(`functionDeclarationsPourOver['${node.id.name}'] = [${node.loc.start.line}, ${node.loc.end.line}]`)) ``` Afterwards, the user may click "Next Step" to walk through the stack information we have collected and see a visualization on the right. When inside a certain stack frame, that frame will stay at the bottom and not pop off until it is exited. ### Performance Metrics When the user clicks "Compile", the code in the editor is run in a sandbox to collect metrics such as execution time, return value, number of function calls, variables declared in each scope, and any function inheritance chains: - The execution time is collected by placing a performance.now() statement before and after execution of the code and subtracting the two values. - The return value is simply the output value of the entire snippet from being run in the sandbox. - The rest of the metrics are collected by analyzing and injecting code into the Abstract Syntax Tree. ## Future Directions for the Project In addition to the features that have been implemented, we plan to add more features in the future. The following are next steps for PourOverJS: - Add more types of expression statements to call stack - Performance metrics visualization with D3.js - O'auth sign in with Github and Google - Asynchronous event loop visualization - Scope display as users step through the code - Demonstration of variable closure as users step through the code [crud_proto]: https://github.com/aravi3/MERN_CRUD_Application

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：