# es6 Published articles for es6. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Babel in Khan Academy's i18n Toolchain DevFeed: [Babel in Khan Academy's i18n Toolchain]() Original publisher: [Read original article]() Author: Khan Academy Published: 2015-06-22T22:00:00Z Content type: tutorial Language: en Sources: [Khan Academy]() Topics: [Babel](), [Internationalization (i18n)](), [toolchain](), [es6](), [JavaScript](), [Parser](), [Universal Syntax Tree.](), [Open Source]() Tags: [api](), [architecture](), [babel](), [build](), [build-system](), [code](), [engineering](), [es6](), [eslint](), [frontend](), [javascript](), [news](), [plugin](), [source](), [structure](), [syntax](), [tests](), [toolchain](), [types](), [web-frontend](), [workflow]() ### AI overview Khan Academy describes switching its ES6 and JSX frontend compilation from jstransform to Babel. The article explains a custom Babel plugin for preserving the project's internationalization behavior and discusses matching generated output, line numbers, whitespace, and the existing build chain. ### Source excerpt By Kevin Barabash We've been using ES6 (along with JSX) for sometime at Khan Academy. Right now, we're ... Read more ## Interning at Khan Academy: from student to intern DevFeed: [Interning at Khan Academy: from student to intern]() Original publisher: [Read original article]() Author: Khan Academy Published: 2016-12-12T23:00:00Z Content type: article Language: en Sources: [Khan Academy]() Topics: [Mobile](), [Front end](), [React](), [JavaScript](), [es6](), [User Experience](), [Scala]() Tags: [bugs](), [engineering](), [es6](), [features](), [frontend](), [intern](), [javascript](), [mobile](), [news](), [open-source](), [react](), [student](), [user-experience](), [web-frontend]() ### AI overview A student intern describes two months working on Khan Academy's X-on-Mobile initiative. The article covers improving a mobile math keypad, fixing gesture-related bugs, adding interface features, learning idiomatic ES6 with React in production, and working with open-source libraries. ### Source excerpt By Shadaj Laddad This past summer I had the amazing opportunity to work on a product I use ... Read more ## A critical history of JavaScript's prototype-based design and later TypeScript and ES6 changes DevFeed: [A critical history of JavaScript's prototype-based design and later TypeScript and ES6 changes]() Original publisher: [Read original article]() Author: Yegor Bugayenko (yegor256@gmail.com) Published: 2025-12-27T21:00:00Z Content type: opinion Language: en Sources: [Yegor Bugayenko]() Topics: [JavaScript](), [TypeScript](), [es6](), [Functional programming]() Tags: [es6](), [javascript](), [object-oriented](), [oop](), [prototype](), [prototypes](), [typescript](), [typescript-is-clumsy](), [typescript-is-ugly](), [typescript-types](), [typescript-vs-javascript]() ### AI overview This opinion article recounts JavaScript's origins and argues that its prototype-based, class-free design was later undermined by TypeScript and ES6 classes. It also compares JavaScript's object model with Scheme, Self, C++, and Java. ### Source excerpt JavaScript was an elegant prototype-based class-free language until TypeScript and ES6 classes ruined it. ## Starting a TypeScript Project in 2021 DevFeed: [Starting a TypeScript Project in 2021]() Original publisher: [Read original article]() Author: Chris Hager Published: 2021-04-15T00:00:00Z Content type: tutorial Language: en Sources: [Chris Hager]() Topics: [TypeScript](), [Testing](), [Jest](), [CI/CD](), [npm](), [Documentation](), [GitHub Actions](), [GitLab]() Tags: [api-documentation](), [boilerplate](), [browser](), [es6](), [esbuild](), [github-actions](), [gitlab](), [javascript](), [jest](), [node-js](), [npm](), [project](), [setup](), [template](), [testing](), [typescript]() ### AI overview A practical guide to starting a TypeScript 4 project with modern tooling, covering project setup, esbuild bundling, linting, Jest testing, npm publishing, continuous integration, and automatic API documentation. ### Source excerpt This is a guide for starting a TypeScript project in 2021 with modern tooling. TypeScript 4 Optionally esbuild to bundle for browsers (and Node.js) Linting with typescript-eslint (tslint is deprecated) Testing with Jest (and ts-jest) Publishing a package to npm Continuous integration (GitHub Actions / GitLab CI) Automatic API documentation with TypeDoc ## Starting a TypeScript Project in 2021 DevFeed: [Starting a TypeScript Project in 2021]() Original publisher: [Read original article]() Author: Chris Hager Published: 2021-03-24T00:00:00Z Content type: tutorial Language: en Sources: [Chris Hager]() Topics: [TypeScript](), [Node.js](), [Jest](), [CI/CD](), [npm](), [Compiler](), [JavaScript]() Tags: [boilerplate](), [browser](), [deprecated](), [es6](), [esbuild](), [eslint](), [github](), [gitlab-ci](), [javascript](), [jest](), [node-js](), [npm](), [project](), [setup](), [template](), [typescript]() ### AI overview A practical guide to starting a TypeScript project with modern tooling, covering project setup, linting, Jest testing, esbuild bundling, npm publishing, continuous integration, and automatic API documentation. ### Source excerpt Moved to /2021/04/starting-a-typescript-project-in-2021/ ## Fixing typedoc's generated TOC if your code is using ES6 modules DevFeed: [Fixing typedoc's generated TOC if your code is using ES6 modules]() Original publisher: [Read original article]() Author: Monica Dinculescu Published: 2020-02-21T00:00:00Z Content type: tutorial Language: en Sources: [Monica Dinculescu]() Topics: [Documentation](), [TypeScript](), [JavaScript](), [es6](), [modules]() Tags: [es6](), [javascript](), [modules](), [typescript]() ### AI overview A tutorial describing a workaround for TypeDoc navigation when a TypeScript JavaScript library exports only selected files from its top-level index.ts. The author reports that several TypeDoc flags did not prevent private files from appearing in the main table of contents, and uses injected JavaScript to hide files that are not top-level exports. ### Source excerpt My one policy about blogging is "write the blog post you wanted to find in the search results". I spent an inordinate amount of time yesterday trying to get typedoc to only show the docs for the files I'm actually exporting in my library, and didn't find anything on the internet to help me, so here is the blog post I wanted to read. The problem You are working on a JS library. You author your source in TypeScript. You have an index.ts file that exports only some of your source files. You would like your generated docs from typedoc to only have docs for those files (Why? So that people don't open issues along the lines of "I see the docs for function foo, but I can't see how to call it, pls export it". Sweet child, if that function was meant to be public it probably would've been. That function is actually 3 spiders in a trench coat). That is, you would like your Table of Contents to show this: and not this: Things that aren't solutions In the order that I've tried them: the --mode modules flag: the word "modules" is a lie here and really just means "under a namespace" not like... ES6 modules (tracking issue) the --excludeNotExported flag: it helps to generate docs for only the exported functions, but not files the -excludePrivate flag: same as above the --exclude flag: this is nice in theory, but I have like 30+ private files that shouldn't be documented and only like 5 top level exports, so that regex will suck. Also, my experience is that next time someone adds a file they want or don't want documented they won't know to add it to this list and we're back to having a problem the --toc flag. I honestly don't know what it does, but for me, it did nothing 100% of the time thinking this should presently work in typedoc. Here is the tracking issue and the open PR that might fix it. My "solution" I'm less bothered that the docs for the private files get generated at all, and more bothered that they're linked in the main page TOC and thus discoverable. So my "solution" tha ## A Gulp Workflow for Frontend Development Automation DevFeed: [A Gulp Workflow for Frontend Development Automation]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2017-08-15T22:25:00Z Content type: tutorial Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [Gulp](), [frontend development](), [workflow automation](), [CSS](), [JavaScript](), [make]() Tags: [automation](), [build](), [cache](), [cool](), [css](), [debugging](), [development](), [es6](), [faster](), [frontend](), [frontend-development](), [gulp](), [helps](), [here-s](), [insights](), [javascript](), [scss](), [stuff](), [tool](), [workflow]() ### AI overview A tutorial explaining why frontend workflow automation is useful and how Gulp can assemble a website's assets. It describes tasks for processing CSS and JavaScript, including SCSS compilation, browser prefixing, source maps, dependency inclusion, combining, minification, transpilation, and uglification. ### Source excerpt Gulp is a workflow automation tool that helps you build cool stuff faster; here's how to use it for frontend development. ## Using Proxies with Redux Types DevFeed: [Using Proxies with Redux Types]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2017-03-28T16:00:00Z Content type: tutorial Language: en Sources: [ReactJS News]() Topics: [Redux](), [debugging](), [Code]() Tags: [code](), [debugging](), [errors](), [es2015](), [es6](), [import](), [js](), [react](), [redux]() ### AI overview This tutorial explains how misspelled Redux action types can be imported as undefined without raising browser errors, causing reducers to fall through to their default case. It proposes using ES2015 Proxies to validate action-type properties and make such mistakes easier to detect. ### Source excerpt One of the most common problems that I run into when using Redux is trying to figure out why an action is not being captured by a reducer. For someone just getting starting with Redux, debugging this issue can be especially overwhelming because of how Redux manages data flow. So before you start pouring over configuration code, or the logic contained in your action creators and reducers, please, make sure your action types are defined and spelled correctly. One of the most common problems that I run into when using Redux is trying to figure out why an action is not being captured by a reducer. For someone just getting starting with Redux, debugging this issue can be especially overwhelming because of how Redux manages data flow. So before you start pouring over configuration code, or the logic contained in your action creators and reducers, please, make sure your action types are defined and spelled correctly. In any application that I have built, most bugs that I have run into are simply due to typos. However, the solution to this particular problem is harder to spot because no errors are raised when the application is run. Take a look at the snippet below. // actionTypes.js export const FETCH_FILE_REQUEST = 'fetch_file_request'; export const FETCH_FILE_SUCCESS = 'fetch_file_success'; export const FETCH_FILE_FAIL = 'fetch_file_fail'; // filesReducer.js import { FETCH_FILE_REQUEST, FETCH_FILE_SUCESS, FETCH_FILE_FAIL } from '../actions/actionTypes'; const filesReducer = (state = {}, action) => { switch (action.type) { case FETCH_FILE_SUCESS: return { ...state, file: action.payload }; default: return state; } } export default filesReducer; Assuming we dispatched an action with type FETCH_FILE_SUCCESS, the filesReducer should catch the action before the default case is returned. But what if that is not happening? Where do we start the debugging process. There does not appear to be anything wrong with the code in the reducer; the action type was imported and matches the ## Angular Modules vs ES6 Modules DevFeed: [Angular Modules vs ES6 Modules]() Original publisher: [Read original article]() Published: 2017-03-08T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [modules](), [ECMAScript](), [JavaScript](), [Development](), [front-end-development]() Tags: [angular](), [commonjs](), [components](), [development](), [es6](), [front-end](), [javascript](), [module](), [modules]() ### AI overview This tutorial explains that Angular Modules and ES6 Modules are different concepts. It describes ES6 Modules as a standard way to define imports and exports, and Angular Modules as logical groupings of Angular artifacts and their dependencies within an application. ### Source excerpt Lorem ipsum dolor sit amet ## Setting up Webpack, Babel and React from scratch - Part 2 DevFeed: [Setting up Webpack, Babel and React from scratch - Part 2]() Original publisher: [Read original article]() Author: Stanko Published: 2016-08-29T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Webpack](), [Babel](), [Sass](), [React](), [es6](), [JavaScript](), [Web Development]() Tags: [babel](), [compiler](), [css](), [es6](), [javascript](), [react](), [sass](), [webpack]() ### AI overview Part two of a tutorial on setting up Webpack, Babel, and React covers adding SASS support, source maps, Autoprefixer, hot reloading, and additional ES6 features such as static class properties and decorators. ### Source excerpt Part two # Update: Part two is pretty much done. Part three will cover redux and production builds. Other parts: Part 1 - Webpack, Babel, React, Router, ESLint Part 2 - SASS, More ES6 goodness (Static props, decorators, deconstruction...) Part 3 - Where to go from here Adding SASS # We will use SASS loader for webpack, so let's install it together with node-sass compiler, css and style loaders npm install --save-dev style-loader css-loader sass-loader node-sass Create scss folder in the app folder, and main app.scss file in it. This file will include all of the other scss files. Now we need to add a loader to webpack config file. ... { test: /\.scss$/, loader: 'style!css!sass' } ... This will handle importing SCSS files in our JavaScript code. So we need to import app.scss manually in the JavaScript code. You'll need to add only one line to your app.js. import '../scss/app.scss'; This includes your styles by calling loaders we defined in the webpack config. Restart your webpack, and voala, now we have styles and hot reloading for them. Try changing your styles to check it. Source maps # To enable source maps, we'll pass the sourceMap option to the sass and the css loaders. Enable devtool, and update the loader ... devtool: 'inline-source-map', // or 'source-map' module: { loaders: [ ... { test: /\.scss$/, loader: 'style!css?sourceMap!sass?sourceMap', } ] } ... If you want to read more, here's link to the official documentation Autoprefixer # Always use autoprefixer - I can't stress this enough. We'll need postcss loader, precss and autoprefixer npm install --save-dev postcss-loader precss autoprefixer At the top of our webpack config, require precss and autoprefixer const precss = require('precss'); const autoprefixer = require('autoprefixer'); Update our sass loader config and and postcss config ... module: { loaders: [ ... { test: /\.scss$/, loader: 'style!css?sourceMap!postcss!sass?sourceMap', } ] }, postcss() { return [autoprefixer, precss]; }, ... Restart webpa ## Highlight variables in Atom, Babel template strings DevFeed: [Highlight variables in Atom, Babel template strings]() Original publisher: [Read original article]() Author: Stanko Published: 2016-05-07T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Atom](), [Babel](), [es6](), [Snippet](), [Less]() Tags: [atom](), [babel](), [css](), [es2015](), [es6](), [less](), [snippet](), [template-strings](), [variable]() ### AI overview A guide to fixing an Atom Babel plugin issue where variables in ES6 template strings are not highlighted. It provides an Atom style.less snippet that styles JavaScript variables and explains how to inspect Atom's element classes for additional CSS or LESS customizations. ### Source excerpt Atom Babel plugin doesn't highlight variables in ES6 (ES2015) template strings. You'll need to add this snippet to your Atom's style.less atom-text-editor::shadow .variable.js { color: #F8F8F2; } In general, you can just inspect stuff in Atom, find out what classes element are using, and then style it via CSS (LESS). Just don't forget to add atom-text-editor::shadow before your rules. If anyone is interested, I'm using Monokai Seti theme. ## Jekyll and Gulp workflow DevFeed: [Jekyll and Gulp workflow]() Original publisher: [Read original article]() Author: Stanko Published: 2016-02-27T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Gulp](), [Jekyll](), [Sass](), [JavaScript](), [Development](), [es6]() Tags: [development](), [es6](), [gulp](), [javascript](), [jekyll](), [sass](), [workflow]() ### AI overview This tutorial describes a Jekyll development workflow that uses Gulp to compile and watch SASS and JavaScript, run a local Jekyll server, proxy it through BrowserSync, and reload the browser on changes. The author notes that the setup may be outdated because they no longer use Jekyll. ### Source excerpt Please note that I'm not using Jekyll anymore, so this post might be outdated. Update, November 2017 # I don't use this setup anymore, it might be outdated, proceed with caution. Original post # As you probably know this blog is powered by Jekyll. It is a really nice platform, but it lacks a few things I'm used to during development. First one is live reload on file changes (and injecting CSS), using SASS, autoprefixer, ES6... I tried to find a boilerplate, but everything I found didn't match my needs. Usually people would run gulp tasks for SASS and JavaScript files, and on change run jekyll build, which is insanely slow. They would use BrowserSync to serve _site folder. So I did what programmers do - written my own. I quickly made usual gulp tasks: styles - to compile SASS and autoprefix it scripts - to transpile ES6 goodness, and concatenate JavaScript files serve - to start local server, watch for changes and auto reload First thing I did is that I was running jekyll serve in one terminal, and gulp serve with BrowserSync in the other. This was working decently, but I wanted to run only one command, and let the tasks do everything for me. That is where node child process comes in. import childProcess from 'child_process'; const spawn = childProcess.spawn; gulp.task('jekyll', function (){ const jekyll = spawn('jekyll', ['serve'], { stdio: 'inherit' }); }); This task spawns a child process from gulp. Nice thing is that we can start it, and gulp will kill it on exit. Now we have up and running Jekyll server, and proxy it to BrowserSync. But darn, injecting CSS files didn't really work. Server was expeting CSS file to come from /css/style.css, but browserSync.stream in gulp pipe would inject it from the _sass folder. I solved this by copying css file to the .tmp/css and adding .tmp to the serveStatic option of the BrowserSync. One thing I should mention, that I keep my SASS files in the _sass folder, and JavaScript in the _js one. Gulp watches changes on SASS/JS, and ## How to export a JavaScript module to multiple formats DevFeed: [How to export a JavaScript module to multiple formats]() Original publisher: [Read original article]() Author: Tom Bartel Published: 2015-12-17T00:00:00Z Content type: tutorial Language: en Sources: [Trivago]() Topics: [JavaScript](), [Webpack](), [Library](), [CommonJS](), [modules](), [es6](), [Compiler]() Tags: [article](), [build](), [code](), [commonjs](), [es6](), [frontend](), [how-to](), [javascript](), [webpack]() ### AI overview This tutorial explains how to use webpack to publish a JavaScript library in multiple module formats, including CommonJS, AMD, ES6, global-variable, and UMD formats. It covers the libraryTarget configuration and using multiple compiler runs for different build targets. ### Source excerpt When publishing a JavaScript library, we usually want to make it available to as many people as possible to maximize the library's usefulness and adoption. In that respect, it can be helpful to users to have the library available in their preferred module format - CommonJS, AMD, ES6, etc. ## Multiline strings in ES6 JavaScript DevFeed: [Multiline strings in ES6 JavaScript]() Original publisher: [Read original article]() Author: Jack Tarantino Published: 2015-11-29T23:59:53Z Content type: tutorial Language: en Sources: [Jacopo Tarantino]() Topics: [JavaScript](), [es6](), [Template]() Tags: [best-practices](), [es6](), [javascript](), [string](), [template](), [template-strings](), [templates]() ### AI overview A tutorial on ES6 Template Strings in JavaScript, covering multiline strings, interpolation, tagged template strings, and older ES5 techniques for writing multiline strings. ### Source excerpt The new kid in town is called Template Strings. Template Strings are demarked by a backtick(`) on either end and can contain other backticks if they are escaped by a backslash(ie. let my_string = `some cool \`escaped\` thing`). This new kind of primitive in JavaScript is different from ## ES6 IIFE with fat arrow functions DevFeed: [ES6 IIFE with fat arrow functions]() Original publisher: [Read original article]() Author: Jack Tarantino Published: 2015-11-29T17:45:39Z Content type: tutorial Language: en Sources: [Jacopo Tarantino]() Topics: [es6](), [es2015](), [function](), [syntax]() Tags: [best-practices](), [closure](), [context](), [es2015](), [es6](), [function](), [javascript](), [syntax]() ### AI overview This tutorial explains how to write Immediately Invoked Function Expressions (IIFEs) in ES6 using fat arrow functions. It compares shorter syntax options, notes differences in function context, and describes a compact form for creating closures that cannot accept arguments. ### Source excerpt Writing Immediately Invoked Function Expressions or IIFEs in ES6(Also known as ES2015 now) just got a lot easier with the introduction of fat arrow functions. (global => { const MY_CONSTANT = 'api key or something' let counter = 0 let some_array = [1,2,34,5,6,7] counter = some_array. ## JavaScript Async/Await and ES6 Generators for Asynchronous Programming DevFeed: [JavaScript Async/Await and ES6 Generators for Asynchronous Programming]() Original publisher: [Read original article]() Author: Tor Arne Kvaløy Published: 2015-10-16T14:00:00Z Content type: tutorial Language: en Sources: [Finn.no]() Topics: [JavaScript](), [async/await](), [async](), [function](), [Code](), [JSON]() Tags: [async](), [asynchronous](), [await](), [callback](), [es6](), [function](), [javascript](), [json](), [node]() ### AI overview This tutorial explains how JavaScript callbacks and nested Promise chains make asynchronous code cumbersome, then shows how ES7 async/await can express asynchronous operations in a more synchronous style. It also describes the role of ES6 generators and demonstrates reading and parsing a JSON file with Node.js. ### Source excerpt This blogpost explains how some nifty features in ES7 will make it easier to write asynchronous code, and how ES6 generators will pave the way for this. Async/await My main annoyance with javascript and Node has been the tedious asynchronous programming model of callbacks, leading to nested callbacks and the so called "callback hell" or "pyramid of doom". Take for example the following code where we are creating a function that reads a file and parses it to JSON, and see how cumbersome it is to read and follow the code: const fs = require("fs"); function readJSONFile(callback) { fs.readFile("file.json", "utf8", (err, data) => { if (err) return callback(err); let json; let parseError; try { json = JSON.parse(data); } catch(e) { parseError = e; } callback(parseError, json); }); }; readJSONFile((err, json) => { if(err) { //handle error } console.log(json); //continue program }); This was slightly improved and simplified with ES6 promises, however, as we can see in the following code, we are still stuck with nested .then-calls: const bluebird = require("bluebird"); const fs = bluebird.promisifyAll(require("fs")); function readJSONFile() { return fs.readFileAsync("file.json", "utf8") .then(data => { return JSON.parse(data); }) }; readJSONFile() .then(json => { console.log(json); //continue program }) .catch(err => { //handle error }) Callbacks and nested .then-statements will be a thing of the past with the upcoming version of Javascript (ES7). It will provide us with the keywords async and await, which will enable us to write asynchronous code as we would have written it in an imperative synchronous way: const bluebird = require("bluebird"); const fs = bluebird.promisifyAll(require("fs")); async function readJSONFile() { const data = await fs.readFileAsync("file.json", "utf8"); return JSON.parse(data); } async function() { try { const json = await readJSONFile(); console.log(json); //continue program } catch(err) { //handle error } }; The await keyword can either take a ## ES2015 - Jump Start DevFeed: [ES2015 - Jump Start]() Original publisher: [Read original article]() Published: 2015-08-25T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [JavaScript](), [Tutorial](), [Babel](), [browsers]() Tags: [babel](), [compatibility](), [es2015](), [es6](), [javascript](), [transpilers](), [tutorial]() ### AI overview A learning article on ES2015 (ES6) covering browser compatibility, transpilers such as BabelJS and Traceur, browser-based tooling, and block scoping with let and const. ### Source excerpt Lorem ipsum dolor sit amet ## Getting Started with ES6 Modules DevFeed: [Getting Started with ES6 Modules]() Original publisher: [Read original article]() Published: 2014-05-03T00:00:00Z Content type: tutorial Language: en Sources: [Robin Ward]() Topics: [ECMAScript](), [modules](), [JavaScript](), [CommonJS](), [Node.js]() Tags: [browser](), [commonjs](), [es6](), [javascript](), [modules](), [node-js]() ### AI overview This tutorial introduces ES6 modules, explaining how they provide standardized JavaScript module syntax after the competing AMD and CommonJS approaches. It demonstrates exporting and using a class across files and explains that transpilers can make ES6 modules usable in browsers before native support is available. ### Source excerpt Javascript is a fantastic example of how something, despite having visible warts and very poor design, can dominate the tech landscape. Nobody uses Javascript because it's a beautiful language; they use it because it's ubiquitous. Its warts are now well understood and most have workarounds. An amazing omission in Javascript's design is the lack of a built-in module system. As more projects used Javascript and shared more code, the need for a robust module system became necessary. Two contenders sprung up, Asynchronous Module Definition (AMD) and CommonJS (CJS). The former is much more popular with browser applications and the latter is much more popular with server applications written in node.js. ## Getting started with Ember App Kit DevFeed: [Getting started with Ember App Kit]() Original publisher: [Read original article]() Author: sensible.io team Published: 2014-03-07T00:00:00Z Content type: tutorial Language: en Sources: [Sensible]() Topics: [Ember](), [Tutorial](), [JavaScript](), [ECMAScript](), [Development]() Tags: [cli](), [component](), [es6](), [getting-started](), [git](), [how-to](), [install](), [javascript](), [modules](), [npm](), [port](), [svg](), [web-browser]() ### AI overview A tutorial for building a simple Ember.js app that logs daily water intake using Ember App Kit. It covers creating a project, installing Grunt, Bower, and Loom, starting a development server, generating routes and controllers, and building a bottle component with an SVG-based water-level display. ### Source excerpt In the following tutorial we'll create a simple Ember.js app for logging your water intake. Besides learning the basics of Ember.js, you will also learn how to use Ember App Kit. You can see the final application right below: Link to Demo About Ember App Kit EAK is the basic building block of your app. It helps you to rapidly start the development with features such as the ES6 module transpiler, automatic reloading, the Grunt task runner, the Bower package manager... EAK uses ECMAScript 6 Modules, which means you can keep your namespace clean and only import objects you need to the current scope. Thanks to es6-module-transpiler you can use the current ES6 module syntax and it will be automatically compiled into today's JavaScript. Creating a project Create your project by cloning EAK ➤ git clone git@github.com:stefanpenner/ember-app-kit.git waterize ➤ cd waterize Optionally you can get rid of the Git history and start fresh ➤ rm -rf .git ➤ git init Install required node binaries This only needs to be done once. Install Grunt, Bower and Loom (if you want to use generate command to easily generate controllers/models etc.). ➤ npm install -g grunt-cli bower loom Starting a development server Install the required node packages and start the server ➤ npm install ➤ grunt server Finally open our project in the web browser (port defaults to 8000). open http://localhost:8000 Generating basic routes and controllers We'll use day controller for storing our water intake per that day. Now let's generate an object controller with Loom In Ember.js, controllers allow you to decorate your models with display logic. In general, your models will have properties that are saved to the server, while controllers will have properties that your app does not need to save to the server. Ember.js guide - Controllers ➤ generate controller day Select o since we want an object controller, then generate a route for the controller When your application starts, the router is responsible for displaying ## ES6 Module Transpiler -- Tomorrow's JavaScript module syntax today DevFeed: [ES6 Module Transpiler -- Tomorrow's JavaScript module syntax today]() Original publisher: [Read original article]() Author: Square Engineering Published: 2013-02-15T17:02:00Z Content type: tutorial Language: en Sources: [Square Corner Blog RSS Feed]() Topics: [JavaScript](), [Frameworks](), [Web Development](), [Code](), [Library]() Tags: [amd](), [applications](), [asynchronous](), [commonjs](), [engineering](), [es6](), [experimental](), [import](), [javascript](), [libraries](), [module](), [node-js](), [web-applications]() ### AI overview The article explains how Square's ES6 Module Transpiler lets developers write JavaScript with the draft ES6 module syntax and compile it for existing runtimes. It discusses interoperability with CommonJS, AMD, global namespaces, and CoffeeScript. ### Source excerpt Using the draft ES6 module syntax in today's frameworks and applications.