Difference between revisions of "JS tools"

From Things and Stuff Wiki
Jump to navigation Jump to search
 
(26 intermediate revisions by the same user not shown)
Line 7: Line 7:
 
* [http://www.jslint.com/ JSLint] [http://www.jslint.com/lint.html]
 
* [http://www.jslint.com/ JSLint] [http://www.jslint.com/lint.html]
 
** https://github.com/timemachine3030/jslint-bookmarklet
 
** https://github.com/timemachine3030/jslint-bookmarklet
 +
 +
* http://jslinterrors.com/
  
 
=== JSHint ===
 
=== JSHint ===
 
fork of jslint, not as strict as crockford's defaults
 
fork of jslint, not as strict as crockford's defaults
 +
 
* [http://www.jshint.com/ JSHint]
 
* [http://www.jshint.com/ JSHint]
** https://github.com/johnbender/jshint-service
 
git clone git@github.com:johnbender/jshint-service.git
 
cd jshint-service
 
heroku create
 
git push heroku master
 
  
* [http://www.vim.org/scripts/script.php?script_id=3576 jshint.vim] : A plugin that integrates JSHint with Vim  
+
* [https://jshint.com/docs/options/ JSHint Options Reference] - JSHint
 +
 
 +
 
 +
* [http://www.vim.org/scripts/script.php?script_id=3576 jshint.vim] : A plugin that integrates JSHint with Vim
 +
 
 +
=== ESLint ===
 +
* [https://eslint.org/ ESLint] - The a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. In many ways, it is similar to JSLint and JSHint with a few exceptions: ESLint uses Espree for JavaScript parsing. ESLint uses an AST to evaluate patterns in code. ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.
 +
** https://github.com/eslint/eslint
  
 
=== Google Closure Linter ===
 
=== Google Closure Linter ===
Line 32: Line 37:
  
 
=== TraceGL ===
 
=== TraceGL ===
* [https://trace.gl/ traceGL] transforms your JavaScript, injecting monitoring code that produces a log of everything that happens. This log is streamed from the target (node or browser), via the traceGL node.js process to the UI for visualisation. The UI tries to display the resulting huge amount of information fast, and uses webGL to render everything.
+
* [https://trace.gl/ traceGL] transforms your JavaScript, injecting monitoring code that produces a log of everything that happens. This log is streamed from the target (node or browser), via the traceGL node.js process to the UI for visualisation. The UI tries to display the resulting huge amount of information fast, and uses webGL to render everything. - $
 +
 
 +
=== other ===
 +
* https://github.com/ebobby/tracing.js
 +
** http://ebobby.org/2013/05/18/Fun-with-Javascript-and-function-tracing.html
 +
 
 +
* http://google.github.io/tracing-framework/
 +
 
 +
* https://github.com/jsoverson/plato
 +
 
 +
* http://mimosajs.com/
 +
 
 +
* http://esprima.org/
 +
 
 +
* http://flowtype.org/
 +
 
 +
== Testing ==
 +
See also [[WebDev#Testing]]
 +
 
 +
* [http://pivotal.github.com/jasmine/ Jasmine] is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.
 +
** http://net.tutsplus.com/tutorials/javascript-ajax/testing-your-javascript-with-jasmine/
 +
 
 +
* [http://qunitjs.com/ QUnit] is a powerful, easy-to-use JavaScript unit test suite. It’s used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself!.
 +
** https://github.com/mmonteleone/pavlov
 +
 
 +
* [http://code.google.com/p/js-test-driver/ JsTestDriver] aims to help javascript developers use good TDD practices and aims to make writing unit tests as easy as what already exists today for java with JUnit.
 +
** http://code.google.com/p/js-test-driver/wiki/GettingStarted
 +
 
 +
* http://gitcanary.com/
 +
 
 +
* http://khan.github.io/structuredjs/
 +
 
 +
* http://karma-runner.github.io/
 +
 
 +
* http://nightwatchjs.org/
  
 
== Stack ==
 
== Stack ==
Line 42: Line 81:
  
 
* Video: [http://www.youtube.com/watch?v=f7AU2Ozu8eo Fluent 2012: Paul Irish, "Javascript Development Workflow of 2013"]
 
* Video: [http://www.youtube.com/watch?v=f7AU2Ozu8eo Fluent 2012: Paul Irish, "Javascript Development Workflow of 2013"]
 +
 +
* https://news.ycombinator.com/item?id=7090479
 +
 +
* https://github.com/webpack/webpack
 +
** https://medium.com/webpack/webpack-its-getting-real-92c60fca1db1#.gswoxgpvk [https://www.reddit.com/r/javascript/comments/4r21rl/webpack_its_getting_real/]
 +
 +
 +
* https://code.facebook.com/posts/1840075619545360 [https://news.ycombinator.com/item?id=12684980]
 +
 +
 +
 +
* http://gpu.rocks/ [https://news.ycombinator.com/item?id=19264154]
 +
 +
== Noflo ==
 +
* http://noflojs.org/
 +
** http://noflojs.org/library/
 +
** https://github.com/noflo/noflo
 +
 +
* http://www.kickstarter.com/projects/noflo/noflo-development-environment
 +
 +
* http://meemoo.org/
 +
** http://meemoo.org/blog/2013-08-24-fbp-and-noflo/
  
 
== Other ==
 
== Other ==
Line 47: Line 108:
  
 
* http://jsshaper.org/
 
* http://jsshaper.org/
 +
 +
* http://dean.edwards.name/packer/ - A JavaScript Compressor.
 +
 +
* http://matthewfl.com/unPacker.html
 +
 +
== Performance ==
 +
* http://jsperf.com/
  
 
== Apps ==
 
== Apps ==
* https://trigger.io/
+
 
 +
 
 +
* [https://cordova.apache.org Apache Cordova] - an open-source mobile development framework. It allows you to use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform development. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's capabilities such as sensors, data, network status, etc. Use Apache Cordova if you are: a mobile developer and want to extend an application across more than one platform, without having to re-implement it with each platform's language and tool set; a web developer and want to deploy a web app that's packaged for distribution in various app store portals; a mobile developer interested in mixing native application components with a WebView (special browser window) that can access device-level APIs, or if you want to develop a plugin interface between native and WebView components.
  
 
== Vim ==
 
== Vim ==
 +
See also [[Vim]]
 +
 
* [https://github.com/rumblesan/vim-js-tools Vim JS Tools] - This is a simple plugin that adds both JSLint and JSBeautify functionality in one. JSLint is currently assumed to be installed globally by npm, JSBeautify code is included.
 
* [https://github.com/rumblesan/vim-js-tools Vim JS Tools] - This is a simple plugin that adds both JSLint and JSBeautify functionality in one. JSLint is currently assumed to be installed globally by npm, JSBeautify code is included.
 
** forked from vim-js-beautify
 
** forked from vim-js-beautify

Latest revision as of 12:24, 14 April 2019

Analysis

JSLint

JSHint

fork of jslint, not as strict as crockford's defaults


  • jshint.vim : A plugin that integrates JSHint with Vim

ESLint

  • ESLint - The a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. In many ways, it is similar to JSLint and JSHint with a few exceptions: ESLint uses Espree for JavaScript parsing. ESLint uses an AST to evaluate patterns in code. ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.

Google Closure Linter

JSBeautifier

DoctorJS

TraceGL

  • traceGL transforms your JavaScript, injecting monitoring code that produces a log of everything that happens. This log is streamed from the target (node or browser), via the traceGL node.js process to the UI for visualisation. The UI tries to display the resulting huge amount of information fast, and uses webGL to render everything. - $

other

Testing

See also WebDev#Testing

  • QUnit is a powerful, easy-to-use JavaScript unit test suite. It’s used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself!.

Stack

  • JSDev is a filter that activates selected comments, making them executable. This makes it possible to put development, performance, and testing scaffolding into a source file. The scaffolding is removed by minification, but is activated by JSDev.
  • Grunt: a task-based command line build tool for JavaScript projects.



Noflo

Other

  • PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

Performance

Apps

  • Apache Cordova - an open-source mobile development framework. It allows you to use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform development. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's capabilities such as sensors, data, network status, etc. Use Apache Cordova if you are: a mobile developer and want to extend an application across more than one platform, without having to re-implement it with each platform's language and tool set; a web developer and want to deploy a web app that's packaged for distribution in various app store portals; a mobile developer interested in mixing native application components with a WebView (special browser window) that can access device-level APIs, or if you want to develop a plugin interface between native and WebView components.

Vim

See also Vim

  • Vim JS Tools - This is a simple plugin that adds both JSLint and JSBeautify functionality in one. JSLint is currently assumed to be installed globally by npm, JSBeautify code is included.
    • forked from vim-js-beautify
  • jshint.vim - This plugin will allow you to run jshint from vim, and shows the results in a split window.