├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── app.html ├── build └── HELLO ├── gulpfile.js ├── images ├── cat1.jpg ├── cat2.jpg ├── cat3.jpg └── cat4.jpg ├── package.json └── src ├── app.js └── load-image.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "jsxPragma": "element" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | build/**/*.js 30 | build/**/*.css 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Mattias Petter Johansson <- REPLACEME 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### Code featured in "Promises - Part 8 of Functional Programming in JavaScript" video 2 | https://www.youtube.com/watch?v=2d7s3spWAzo 3 | 4 | ## Get started 5 | Clone the repo and go 6 | ```npm install && npm run develop``` 7 | 8 | ## Bonus magic 9 | Install [LiveReload](http://livereload.com/) 10 | -------------------------------------------------------------------------------- /app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /build/HELLO: -------------------------------------------------------------------------------- 1 | This is where gulp will place the built files, 2 | such as files that have been compiled with browserify. 3 | It is these files that should be served to the browser, 4 | not the files in /src. 5 | Do not commit files in this dir to version control. 6 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var babel = require('gulp-babel'); 3 | var browserify = require('browserify'); 4 | var watchify = require('watchify'); 5 | var fs = require('fs'); 6 | var babelify = require('babelify'); 7 | var watch = require('gulp-watch'); 8 | var livereload = require('gulp-livereload'); 9 | var runSequence = require('run-sequence'); 10 | var webserver = require('gulp-webserver'); 11 | var assign = require('lodash.assign'); 12 | 13 | // Watchify is an extension for browserify 14 | // that keeps tab on what files are changed 15 | // so that browserify doesn't have to waste 16 | // time on recompiling unchanged files. 17 | // https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md 18 | var customOpts = { debug: true }; 19 | var opts = assign({}, watchify.args, customOpts); 20 | var wb = watchify(browserify(opts)); 21 | 22 | // Add a babelify transform to the 23 | // watchify-browserify object. This 24 | // allows us to use ES6 features in our code, 25 | // and also handles JSX -> JS compilation. 26 | wb.transform(babelify.configure({ 27 | experimental: true, 28 | })) 29 | 30 | // add our entry file to the watchify-browserify 31 | // object. Browserify will pull in the rest our 32 | // app files by traversing imports out from app.js 33 | wb.add('./src/app.js') 34 | 35 | gulp.task('compile', function() { 36 | return wb 37 | .bundle() // do the actual browerify/babelify compilation 38 | .on('error', function (err) { 39 | // If browserify fails at compiling, 40 | // we want that to be forwarded to the browser, 41 | // or we'll be confused why nothing has changed. 42 | fs.createWriteStream("build/app.js") 43 | .write( 44 | 'var errStr = "COMPILATION ERROR! '+err.message+'";' + 45 | 'console.warn(errStr); document.write(errStr)') 46 | console.warn('Error :', err.message); this.emit('end') 47 | }) 48 | .pipe(fs.createWriteStream("build/app.js")) 49 | // write the whole shabang to teh build dir 50 | }) 51 | 52 | gulp.task('webserver-serve', ['compile'] ,function() { 53 | return gulp.src('.') 54 | .pipe(webserver({ 55 | fallback: 'app.html', // defalt page to serve as root 56 | port: 80 57 | })); 58 | }); 59 | 60 | gulp.task('webserver-dev', ['compile'] ,function() { 61 | return gulp.src('.') 62 | .pipe(webserver({ 63 | fallback: 'app.html', // defalt page to serve as root 64 | open: true 65 | })); 66 | }); 67 | 68 | // Task that compiles the app, 69 | // starts a webserver, watches app directory for changes, 70 | // and on change recompiles, and tells livereload to reload. 71 | gulp.task('watch', ['compile'], function () { 72 | livereload.listen() 73 | gulp.start('webserver-dev') 74 | 75 | watch(['*.html', 'src/**/*.js'], function () { 76 | runSequence(['compile'], function() { 77 | livereload.reload('app.html') 78 | }) 79 | }) 80 | }) 81 | 82 | // The default task when running just "gulp" 83 | // is "watch" 84 | gulp.task('default', ['watch']) 85 | -------------------------------------------------------------------------------- /images/cat1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mpj/fpjs8/fc8354289ad985a54449b51ed44779f69807e226/images/cat1.jpg -------------------------------------------------------------------------------- /images/cat2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mpj/fpjs8/fc8354289ad985a54449b51ed44779f69807e226/images/cat2.jpg -------------------------------------------------------------------------------- /images/cat3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mpj/fpjs8/fc8354289ad985a54449b51ed44779f69807e226/images/cat3.jpg -------------------------------------------------------------------------------- /images/cat4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mpj/fpjs8/fc8354289ad985a54449b51ed44779f69807e226/images/cat4.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fpjs8", 3 | "version": "1.0.0", 4 | "description": "Code for Promises - Part 8 of Functional Programming in JavaScript", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1", 7 | "develop": "gulp" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+ssh://git@github.com/mpj/fpjs8.git" 12 | }, 13 | "author": "Mattias Petter Johansson ", 14 | "license": "MIT", 15 | "dependencies": { 16 | "babelify": "^6.1.3", 17 | "browserify": "^10.2.6", 18 | "gulp": "^3.9.0", 19 | "gulp-babel": "^5.1.0", 20 | "gulp-livereload": "^3.8.0", 21 | "gulp-watch": "^4.3.2", 22 | "gulp-webserver": "^0.9.1", 23 | "lodash.assign": "^3.2.0", 24 | "run-sequence": "^1.1.1", 25 | "watchify": "^3.2.3" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import loadImage from './load-image' 2 | 3 | let addImg = (src) => { 4 | let imgElement = 5 | document.createElement("img") 6 | imgElement.src = src 7 | document.body.appendChild(imgElement) 8 | } 9 | 10 | Promise.all([ 11 | loadImage('images/cat1.jpg'), 12 | loadImage('images/cat2.jpg'), 13 | loadImage('images/cat3.jpg'), 14 | loadImage('images/cat4.jpg') 15 | ]).then((images) => { 16 | images.forEach(img => addImg(img.src)) 17 | }).catch((error) => { 18 | // handle error later 19 | }) 20 | -------------------------------------------------------------------------------- /src/load-image.js: -------------------------------------------------------------------------------- 1 | import 'babelify/polyfill' 2 | 3 | function loadImage(url) { 4 | return new Promise((resolve, reject) => { 5 | let image = new Image() 6 | 7 | image.onload = function() { 8 | resolve(image) 9 | } 10 | 11 | image.onerror = function() { 12 | let message = 13 | 'Could not load image at ' + url 14 | reject(new Error(msg)) 15 | } 16 | 17 | image.src = url 18 | 19 | }) 20 | } 21 | export default loadImage 22 | --------------------------------------------------------------------------------