Skip to content

Jsecosystem

This is a compilation of useful Javascript libraries which are used on web and webapp development nowadays.

Packaging, dependencies, preprocessing

  • npm
    • Manages packages for nodejs projects.
    • It's used beyond nodejs for any js program
    • Most other frameworks are installed via npm
    • A project relies on a package.json file with meta, dependencies, commands...
    • It keeps a folder node_modules with the installed dependencies
    • You can configure build commands
  • yarn
    • Package manager.
    • Tries to substitute npm (but uses npm to install itself)
    • Uses the same package.json format and repositories than npm
    • Faster dependency downloads, easier commands
    • Besides loosy package.json version specs, it keeps an specific current version file, that can be shared among developers.
  • Require.js
    • On browser dependency loader
    • Manages javascript modules and dependencies and scopes their global variables to avoid conflicts.
    • You configure requirejs on how to locate and dynamically load modules
    • Out of order script loading, dependency driven script evaluation
    • Lazy definition of modules inside functions, and use require function to actually load them
    • Quite intrusive on the way you layout code
    • Don't use this, mentioned because is influencial on later frameworks
  • Browserify
    • Locates 'require' sentences in your code and builds a js bundle with all dependencies taken from npm repositories.
    • The bundle is built with dependencies inside modules in requirejs way.
  • Bower
    • Manages runtime dependencies (in browser) for web projects
    • Authors indeed recommend webpack and yam, nowadays
    • Manages in-browser dependencies different from npm build dependencies.
    • Places ready to import optimized js inside bower_components
  • Parcel
    • Assets bundler
    • Zero configuration, via sane defaults
  • Webpack
    • Assets bundler.
    • You define dependencies, media... it compiles (process, optimize...) them and generate static files for he web.
    • Solves modularization and dependency resolution using either require or import strategies
    • Asset spliting and multiple inclusion methods (js, inline, asset inline...)
    • Asset transcompilation via plugins
    • Deprecated by Parcel???
  • Brunch
    • Task runner
    • Declarative and simpler than gulp/grunt
    • Alleged vs Webpack: faster, implicit compilation by type,
    • Not tried myself
  • Gulp
    • Task runner to build web static assets
    • Pipe based and imperative
    • Deprecated by webpack

  • Grunt

    • Task runner to build web static assets.
    • Tries to be declarative, at the end it is a configuration hell
    • Deprecated by Gulp

  • Nodejs

    • A webserver framework
    • Event driven: Instead of one thread listening for a petition, running and responding, it enqueues petitions and get served as they go
    • Pure javascript implementation
    • You can use it as javascript terminal
    • See npm

Browser compatibility adapters

  • Modernizer

  • Respond

    • Transparently translates CSS files with CSS3 media queries to old IE<7a
    • This enables responsive designs without caring for lame browsers.
    • Una alternativa más lenta pero mas robusta es css3-mediaqueries.js

  • Normalize.css

    • Style reseter (css3/html5 ready)
    • You start with a common ground in any browser
    • CSS, no javascript.

  • Html5shiv

    • Allows styling new HTML5 elements in older versions of IE

  • Html5 Boilerplate

    • Static website template
    • Includes most things an static website should have nowadays
    • ganalitics, modernizer, jquery, normalize, htaccess, 404 page,

Assets Processors

  • CoffeScript

    • Language that transcompiles into Javascript
    • Inspired by Ruby, Python, Haskell...

  • TypeScript

    • Language that transcompiles into Javascript
    • By Microsoft, embraced by Google's

  • Babel

    • Transcompiler to turn modern ES6 into ES5 which is compatible on most browsers

Python in browser

  • Transcrypt
    • Transcompiler for Python
    • Py2/Py3
    • Generates javascript code
    • Uses Javascript libraries (not python ones)
  • RapydScript
    • Transcompiler
    • Python like syntax constructs for EcmaScript
    • Not Python, new language
  • skulpt
    • Client side python interpreter
    • Py2
    • Teaching tool
    • Slow runtime (1/10 cpython)
  • Brython
    • Client side python interpreter
    • Adds a new script type
    • 500k extra for the jit compiler
  • Pypy.js
    • Client side python interpreter
    • Full Python interpret implementation in javascript
    • Generated from PyPy by means of emscripten ()
    • Big/slow download, fast runtime
    • Full featured
  • Batavia
    • Interprete de Python bytecode en el navegador
    • Py3.4
    • do not interpret python code, but bytecode
    • Very preliminar version

Toolbox Libraries

Improve the usability of standard javascript DOM api's and limitations of standard libraries.

  • jQuery

    • Provides a nicer API for DOM acces (xpath and css like)
    • async Web API queries
    • Other tooling (foreach, apply, bind...)

  • Underscore

    • Basic functions missing in javascript
    • Enables functional programming style

  • Lo-dash

    • Superset of Underscore

  • Sugar

    • Functions to operate nicely with standard objects
    • Objects, Dates, Functions, Ranges, Regexp, Strings, Array...

Application Frameworks

Provide more foundation to the dynamic app building. Usually they use a Model-View-Controller like approach.

  • Bootstrap

    • Responsive layout and graphical components
    • The one used by twitter
    • Themable

  • Angular

    • MVC framework
    • I loved it until i started to use it version 1.x
    • Component based approach improved on 2.x but i am in refractary

  • Mithril

    • MVC/Component framework
    • Simplistic but powerfull and fast
    • Models: bare javascript objects
    • View building by m primitives m('ul.myclas', m('li', 'content'))
    • Efficiency: generates a Virtual DOM that is compared and updated to the real one
    • Routing, async requests and data binders
    • Component based. Component libraries available.

  • React

    • Component Framework
    • Developed by Facebook

  • Backbone

    • MVC framework

  • Vue

    • MVC framework

HTML Presentations

Style preprocessors

  • Stylus
    • Compact syntax, indentation based, no colons no semicolons
    • Still css syntax is accepted
    • Imports, variables, nesting, mixins, extends, color ops, math ops, conditions, loops
  • Less
    • Imports, variables, nesting, mixins, extends, color ops, math ops, conditions, loops
    • Conditions are declarative
  • Sass
    • Imports, variables, nesting, mixins, extends, color ops, math ops, conditions, loops
    • Used by bootstrap, MDC4W...
  • PostCSS
    • API to process CSS rules from javascript
    • Plugins use the API to perform stuff
      • autoprefixer: adds webkit moz prefix when needed
      • preset env: converts modern css4 features into old css
      • linter: warns about css coding conventions
      • Inline images
      • optimizar reglas

Other interesting libraries

  • jquery-tipsy
    • Tooltips cutres tipo facebook
    • http://onehackoranother.com/projects/jquery/tipsy/
  • jquery-infieldlabel
    • Puts the labels of form fields inside them
    • http://fuelyourcoding.com/scripts/infield/
  • jquery-showpassword
    • Places a button on password fields to avoid the stars
    • http://trevordavis.net/blog/jquery-show-password-plugin
  • minicolors
    • color picker
    • http://www.abeautifulsite.net/blog/2011/02/jquery-minicolors-a-color-selector-for-input-controls/
  • timepicker
    • Chose time
    • No idea on which one uses own cloud (many around)
  • chosen
    • User friendly selection boxes
    • http://harvesthq.github.io/chosen/
  • fullcalendar
    • Fullpage calendar
    • http://arshaw.com/fullcalendar/
  • Ace Editor
    • Text editor with syntax highlight
    • http://ace.c9.io
  • Mousewheel
    • cross browswer mousewheel support
    • https://github.com/brandonaaron/jquery-mousewheel
  • lightbox
    • Modal image visualization
  • Colorbox
    • Visualization dialog (like lightbox)
    • External pages, content and ajax
    • Sequence, slideshow
    • http://www.jacklmoore.com/colorbox/
  • js_tpl
    • Javascript (client-side) templating
    • <%= javascript expresion %>
    • Solo en oc_bookmarks
    • http://ejohn.org/blog/javascript-micro-templating/http://ejohn.org/blog/javascript-micro-templating/