Tag Archives: Browserify

ECMAScript 6 Tools: An aggregation of tooling for using ES6 today


Transpilers

  • Babel – Turn ES6+ code into vanilla ES5 with no runtime
  • Traceur compiler – ES6 features > ES5. Includes classes, generators, promises, destructuring patterns, default parameters & more.
  • es6ify – Traceur compiler wrapped as a Browserify v2 transform
  • babelify – Babel transpiler wrapped as a Browserify transform
  • es6-transpiler – ES6 > ES5. Includes classes, destructuring, default parameters, spread
  • Square’s es6-module-transpiler – ES6 modules to AMD or CJS
  • Facebook’s regenerator – transform ES6 yield/generator functions to ES5
  • Facebook’s jstransform – A simple utility for pluggable JS syntax transforms. Comes with a small set of ES6 -> ES5 transforms
  • defs – ES6 block-scoped const and let variables to ES3 vars
  • es6_module_transpiler-rails – ES6 Modules in the Rails Asset Pipeline
  • Some Sweet.js macros that compile from ES6 to ES5
  • Bitovi’s transpile – Converts ES6 to AMD, CJS, and StealJS.
  • regexpu — Transform Unicode-aware ES6 regular expressions to ES5

Build-time transpilation

Grunt Tasks

Gulp Plugins

Broccoli Plugins

Brunch Plugins

Webpack plugins

Duo plugins

Connect plugins

Gobble plugins

Jade plugins

Jest plugins

Karma plugins

Sprockets plugins

Browser plugins

  • Scratch JS – A Chrome/Opera DevTools extension to run ES6 on a page with either Babel or Traceur

Mocha plugins

  • Mocha Traceur – A simple plugin for Mocha to pass JS files through the Traceur compiler

Module Loaders

  • ES6 Module Loader polyfill (compat with latest spec and Traceur)
  • js-loaders – Mozilla’s spec-compliant loader prototype
  • JSPM – ES6, AMD, CJS module loading/package management
  • Module Loader for webpack
  • beck.js – toolkit for ES6 Module Loader pipelines, shim for legacy environments

Boilerplates

  • es6-boilerplate – Tooling to allow the community to use es6 now via traceur in conjunction with amd and browser global modules, with source maps, concatenation, minification, compression, and unit testing in real browsers.

Code generation

Polyfills

Editors

Parsers

Other

Modern JavaScript libraries: the isomorphic way


via Modern JavaScript libraries: the isomorphic way | Milliseconds Matter.

Agolia’s DNA is really about performance. We want our search engine to answer relevant results as fast as possible.

To achieve the best end-to-end performance we’ve decided to go with JavaScript since the total beginning of Algolia. Our end-users search using our REST API directly from their browser – with JavaScript – without going through the websites’ backends.

Our JavaScript & Node.js API clients were implemented 2 years ago and were now lacking of all modern best practices:

  • not following the error-first or callback-last conventions;
  • inconsistent API between the Node.js and the browser implementations;
  • no Promise support;
  • Node.js module named algolia-search, browser module named algoliasearch;
  • cannot use the same module in Node.js or the browser (obviously);
  • browser module could not be used with browserify or webpack. It was exporting multiple properties directly in the window object.

This blog post is a summary of the three main challenges we faced while modernizing our JavaScript client.

Why Angular + Meteor?


via Why Angular + Meteor?

There are stacks of stacks. Overflowing. But what makes a great stack? Were it only the name, we’d all be slam dunkin’ with LEBRON (LevelDB, Browserify & Node).

Better Workflow in Javascript with Browserify


via taha-shBetter Workflow in Javascript with Browserify.

We all know that it’s a best practice to break our javascript code into multiple files. So instead of putting all of our code into one main.js file, we should break it down into multiple js files, and include them in the right order to avoid dependency problems.

Stream your music collection in-browser


via graue/potsfyi.

Pots, fyi is a music streaming app intended to run on a personal server. Set it up and listen to yourmusic collection wherever you might be, using only a web browser!

Getting Started with Browserify


via Getting Started with Browserify.

JavaScript implementations have been getting more and more complex as the beautiful beast we call the web evolves each year. Many of us now work with JavaScript modules – independently functioning components that come together to work as a cohesive whole, yet can happily have any component replaced without causing armageddon. Many of us have been using the AMD module pattern and RequireJS to accomplish this neatly.

Last year, Browserify hit the scene and brought on a lot of excitement. As the dust starts to settle, I wanted to write up an overview on what Browserify is, how it works, and a few options for adding it into your workflow.

ReactJS Tutorial Part 1: A Comprehensive Guide to Building Apps with React.js


via Tyler McGinnis » React.js Tutorial Pt 1: A Comprehensive Guide to Building Apps with React.js.

Pt II: Building React.js Apps with Gulp, and Browserify.

Pt III: Architecting React.js Apps with Flux.

By now you’ve probably heard about facebook’s React. You’ve probably even heard really good things. There has never been a better time to take the leap and start learning React. The difficulty starting out with React isn’t React itself. It’s important to remember React is “just the V in MVC” or “just the view layer”. Comparing React to Angular or React to Ember is unfair because React isn’t trying to be a full fledged framework. It’s just trying to be the view layer, which it’s really good at. This brings up issues for developers who are trying to learn React. React isn’t difficult to learn; putting all of the pieces together to build a full web application in React is.

As you’ve started to learn React you’ve probably ran into this problem. You read facebook’s documentation, read a few tutorials, maybe even watched some Egghead videos. You started feeling pretty comfortable with React. Then you realized “I feel comfortable with React, but I still don’t think I can actually build anything meaningful with it”. I think that’s a thought that everyone learning React has. This goes back to the point of React. If you just learned the “V” in MVC, you would still feel pretty worthless. This React.js tutorial series is going to focus on addressing that concern. We’re going to first start off learning about the fundamentals of React. You’ll get comfortable with React itself from props to state to JSX and everything in between. After learning about the fundamentals of React we’re going to jump into all of the other components (pun slightly intended) that are needed to build a full web application using React.js. We’ll cover how to use Gulp to set up a nice build process for converting React’s HTML like syntax called JSX to JavaScript. We’ll talk about using Browserify to tie all of our components together. We’ll then dive into the Flux architecture and see how Flux can help us structure and architect our React application in an efficient manner. Next we’ll talk about persisting our data with Firebase and using React Router for, you guessed it, introducing routing into our app. After that, we’ll put it all together and build a “Github Note Taker” app, an app that allows you to save notes and see a snapshot of a developers Github account (potentially useful for tech interviews where you want to take notes on a particular candidate). I realize this is a lot, but when I first started learning React I was frustrated with the lack of tutorials focused on putting all the pieces of React together. This tutorial series hopes to fill that gap.

As mentioned above, this blog series will have six parts.

Pt I: A Comprehensive Guide to Building Apps with React.js.

Pt II: Building React.js Apps with Gulp, and Browserify. (Coming Soon)

Pt III: Architecting React.js Apps with Flux. (Coming Soon)

Pt IV: Add Routing to your React App with React Router. (Coming Soon)

Pt V: Add Data Persistence to your React App with Firebase. (Coming Soon)

Pt VI: Combining React.js, Flux, React Router, Firebase, Gulp, and Browserify. (Coming Soon)