buildfirst / buildfirst Goto Github PK

View Code? Open in Web Editor NEW

719.0 59.0 117.0 26.91 MB

:hammer: JavaScript Application Design: A Build First Approach. Code Samples and Snippets

Home Page: https://ponyfoo.com/books/javascript-application-design

License: MIT License

JavaScript 76.08% CSS 4.29% HTML 15.82% Java 1.13% mupad 1.98% Shell 0.71%

javascript book application-design code-samples

buildfirst's Introduction

JavaScript Application Design

A Build First Approach

Accompanying code samples and snippets for the JavaScript Application Design: A Build First Approach book.

These are the accompanying code samples and snippets for a book I wrote about JavaScript build processes and application architecture. The samples are organized by chapter, and they appear in the same order as they do in the book, for convenience.

Fell out of the skies and would like to learn more about the book?

You could visit its landing page to learn all about it!

Book buying frenzy? Say no more, stranger!

Installation Pre-Requisites

You'll need Node.js. You can get the latest version from their website, although I'd suggest using nvm, which makes it super easy to install multiple versions, and switch between them.

You'll need GraphicsMagick, and also phantomjs, to run some of the examples. PhantomJS comes in a module that you can conveniently install as a global.

npm install -g phantomjs

GraphicsMagick comes in different distributions for OSX, Linux, and Windows, so please refer to their site to download the appropriate distribution. If you're on Ubuntu, I'd recommend installing it through apt-get. If you're on OSX, you can use brew to install it. These kinds of tooling download automation present the most benefits when you automate all of your development environment provisioning, enhancing consistency across fresh installs in your systems. As an example, you can take a look at my dotfiles project, for reference.

Installation

Once you have Node and the other tools you'll need, use the command below to clone this repository and install all of the dependencies:

curl https://raw.githubusercontent.com/buildfirst/buildfirst/master/install.sh | sh

_{If you're on Windows use install-dos.sh, instead.}

That's it! You are now free to roam the sample directories and follow the instructions in each of them!

Manual installation instructions can be found here, but you shouldn't need any of that.

Execution

To run an example, read its README.md and follow the instructions I've placed there. I tried to make them as straightforward as possible, but sometimes they might not match the examples in the book to the letter.

There are some examples here that you won't find on the book, those will generally be a bit longer: exactly the reason why I didn't include them in the book. Although the code itself might not be present in the book, most of the explaining will definitely be there, rather than here.

Here is a complete list of the code samples found in this repository.

Chapter 1
- Lint Sample
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
- A measly client-side layer
Appendix B: Introduction to Grunt
Appendix C: Picking Your Build Tool

Release History

This is the list of releases to date. You can feel free to simply clone master, to get the most up-to-date version.

You can find the repository up on GitHub, which contains the latest updates to the samples, and interactively renders the Markdown code in this text, displaying images, making code prettier, styling the text, and letting you follow links.

Troubleshooting

If you run into any problems, please create an issue here. Maybe it's something that needs fixing. If you feel like contributing, that's awesome! Just fork this repo and create a pull request with your fixes or improvements.

Feedback

Feedback about the book itself should be posted on the Manning Online Author Forum. You can drop me a line at [email protected] if you want to leave me a more personal note, just say hi, or grunt at me about my failure to amuse you. I'd love to hear from you!

You can also find me blogging at Pony Foo. My Twitter account is @nzgb, and I enjoy people stalking me over the Internet!

Let the #buildfirst revolution commence!

buildfirst's People

Contributors

Stargazers

Watchers

Forkers

videogramme vdt bertomartin thatchristoph repos-javascript nolboo joao-parana cybernetics macflecknoe tml gsaini arcseldon webnerdlw empire xiaojichao sourceful noamkfir anthonybrown pedro-pica-piedras zerocity vhagerty marufsiddiqui morhys sameerkarim mkessel007 amikeliunas codef0rmer webdev1001 donthadineshkumar royriojas mouthzipper yaojingguo lnickers2004 dvandyke tiangestar superwzx nnamso twocngdagz dhaneshkk nguyenduythanh devhoon stevemao manoj-bhosale nouranmahmoud subramaniashiva cesarmarinhorj thalesmello jwag598 andmarkan jardar luiz158 lwd426 yuanganping bradparks sergiofgonzalez llfly langshaodi noscripter gdeb anilsambasivan sethathomas jlnabais mrhighwin coiy ezubarev macroj ansedd95 ikuznalex resourcefull loop1998 fruitplus ooccoob luizclaudiosantos daneestar lbudakov juniornodedevs gruad faneder lafeillou paaacman hypster jonatansalas ptzagk izooky but-he readingcommando amandadoughty niilante gloriashen angeldude vagon4 solomon-m sattamjh daihuaye alegorico louy755 nmtri1987 aneurysadames delejnr lushuan

buildfirst's Issues

[ch06/10_promise-error-handling] Typo

On example.js(line 16), Promise should read Prom otherwise it throws a ReferenceError when run:

ReferenceError: Promise is not defined
    at Object.<anonymous> (/Users/xxx/buildfirst/ch06/10_promise-error-handling/example.js:16:1)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:901:3

Sprite example has fatal error

Hi,
I'm building the code in Ch 2 and using the downloaded source for the sprite example. I keep getting the error 'grunt.sprite requires a src, dest (img) and destCss property'. This is despite verifying that all the directories referenced are present and viewable. I initially built my own Gruntfile.js and used a package.json that was composed by running npm install with the --save-dev option. I even tried using the ones that were in the build directory in case I made a typo. Same error.
This is being compiled on Centos7. My NodeJS is version 12.16.2, and Grunt is at version 1.1.0

Ch 01 Lint Sample

Link to article by JSHint creator is broken.

[ch5/info-hiding] Logic error in pure.js

When running pure.js, there's an error on line 18 as the argument to the average() function should be an array.

var avg = average(1,3);
should read
var avg = average([1,3]);

Error:

/Users/xxx/buildfirst/ch05/02_information-hiding/pure.js:9
  var sum = values.reduce(function (accumulator, value) {
                   ^
TypeError: Object 1 has no method 'reduce'
    at average (/Users/xxx/buildfirst/ch05/02_information-hiding/pure.js:9:20)
    at Object.<anonymous> (/Users/xxx/buildfirst/ch05/02_information-hiding/pure.js:18:11)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:901:3

[ch08/06_fake-xhr-requests] Error when running QOTD test cases

When running the test cases of the qotd service (either via node or in the browser), I get the following

TAP version 13
# qotd service should make an XHR call
not ok 1 TypeError: Cannot read property 'create' of undefined
  ---
    operator: error
    expected: undefined
    actual:   [TypeError: Cannot read property 'create' of undefined]
    stack:
      TypeError: Cannot read property 'create' of undefined
        at Test.<anonymous> (/Users/xxx/buildfirst/ch08/06_fake-xhr-requests/test/qotd.js:8:32)
        at Test.bound [as _cb] (/Users/xxx/buildfirst/ch08/06_fake-xhr-requests/node_modules/tape/lib/test.js:60:32)
        at Test.run (/Users/xxx/buildfirst/ch08/06_fake-xhr-requests/node_modules/tape/lib/test.js:74:14)
        at Test.bound [as run] (/Users/xxx/buildfirst/ch08/06_fake-xhr-requests/node_modules/tape/lib/test.js:60:32)
        at Immediate.next [as _onImmediate] (/Users/xxx/buildfirst/ch08/06_fake-xhr-requests/node_modules/tape/lib/results.js:66:15)
        at processImmediate [as _immediateCallback] (timers.js:374:17)
  ...

1..1
# tests 1
# pass  0
# fail  1

Looks like a versioning issue as the package.json file states "sinon": ^1.9.0, yet 1.10.3 was installed.

Typo in ch03/02_rsa-config-encryption

towards the bottom of the README file, grunt_decrypt:foo should read grunt pem_decrypt:foo

[ch07/11_entourage] /repos link yields 404

On the main page of the entourage app, clicking on the "Repos" link yields a 404. Note that the "Repos" link works OK in the ch07/12_full-metal-jacket example.

ch06 12_generator-basics/02_for-of.js

You're missing a var keyword in the for statement in order to run this example in the ES6 fiddle, like this:

function* keywords () {
  yield 'buildfirst';
  yield 'javascript';
  yield 'design';
  yield 'architecture';
}

for (var keyword of keywords()) {
  console.log(keyword);
}

Awsome book so far. Thanks for the shared knowledge.

Typo in README.md

This are the accompanying code samples

should be

These are the accompanying code samples

Further build issues

./ch02/06_spritesheet-task

[email protected] preinstall /Volumes/BoxCryptor/Development/Meteor/buildfirst/ch02/06_spritesheet-task/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/gmsmith
gm -version || convert -version

sh: gm: command not found
sh: convert: command not found
npm WARN optional dep failed, continuing [email protected]

[email protected] preinstall /Volumes/BoxCryptor/Development/Meteor/buildfirst/ch02/06_spritesheet-task/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith
phantomjs --version

sh: phantomjs: command not found
npm WARN optional dep failed, continuing [email protected]
npm WARN engine [email protected]: wanted: {"node":"0.8.x"} (current: {"node":"0.10.29","npm":"2.0.0-alpha-5"})

[email protected] install /Volumes/BoxCryptor/Development/Meteor/buildfirst/ch02/06_spritesheet-task/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/canvassmith/node_modules/canvas
node-gyp rebuild

Package cairo was not found in the pkg-config search path.
Perhaps you should add the directory containing cairo.pc' to the PKG_CONFIG_PATH environment variable No package 'cairo' found gyp: Call to './util/has_cairo_freetype.sh' returned exit status 0. while trying to load binding.gyp gyp ERR! configure error gyp ERR! stack Error:gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:343:16)
gyp ERR! stack at ChildProcess.emit (events.js:98:17)
gyp ERR! stack at Process.ChildProcess._handle.onexit (child_process.js:809:12)
gyp ERR! System Darwin 14.0.0
gyp ERR! command "node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Volumes/BoxCryptor/Development/Meteor/buildfirst/ch02/06_spritesheet-task/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/canvassmith/node_modules/canvas
gyp ERR! node -v v0.10.29
gyp ERR! node-gyp -v v0.13.1
gyp ERR! not ok
npm WARN optional dep failed, continuing [email protected]
[email protected] ch02/06_spritesheet-task/node_modules/grunt

[ch08/07_dom-interaction-testing] Act lines in Assert part

In test/event-bar.js, lines 142 and 143 are in the Assert part and should better go in the Act part instead. We only need a second result variable to assign the result after the last click.

[ch07/11_entourage] Deprecation warnings

When starting up the app.js file, the following is output in the console window:
Do we care?

connect deprecated utils.merge: use utils-merge npm module instead node_modules/express/lib/express.js:36:9
connect deprecated multipart: use parser (multiparty, busboy, formidable) npm module instead node_modules/express/node_modules/connect/lib/middleware/bodyParser.js:56:20
connect deprecated limit: Restrict request size at location of read node_modules/express/node_modules/connect/lib/middleware/multipart.js:86:15

[ch08/06_fake-xhr-requests] XHR casing

In the README.md file, two occurrences of XmlHTTPRequest should read XMLHttpRequest

[ch06/09_promise-flow] Typo

On 01_concurrent.js(line 13), Promise should read Prom otherwise it throws a ReferenceError when run:

ReferenceError: Promise is not defined
    at Object.<anonymous> (/Users/xxx/buildfirst/ch06/09_promise-flow/01_concurrent.js:13:1)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:901:3

[ch07/08_creating-items] input tag should be closed

On lines 12 and 14 of list.mu, the <input>tags should be closed <input … />

./ch02/06_spritesheet-task

[email protected] preinstall /Volumes/BoxCryptor/Development/Meteor/buildfirst/ch02/06_spritesheet-task/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/gmsmith
gm -version || convert -version

sh: gm: command not found
sh: convert: command not found

[ch07/09_item-editing] input tag should be closed

On lines 3 and 5 of addItem.mu, the <input>tags should be closed <input … />

[ch06/06_async-queue] Provide install/run instructions

It would be useful to explain how to run the code in ch06/06_async-queue, i.e. how to install the async module and run the code to see the effect.

What I did in ch06/06_async-queue to run the code was:

> echo "{}" > package.json
> npm install async --save
> node queue.js

That worked out and printed

Did something with id 13
Did something with id 12
Did something with id 5
Did something with id 135

Ch 02 layout.less / design.less

Hi!

In the book (pages 34-35) the examples use layout.less instead of design.less

[ch08/09_grunt-tape-browser] No headless browser found

Running the test yields the following

> grunt test
Running "testling" task
No headless browser found.

Done, without errors.

Am I missing something?

I think within ./ch02/06_spritesheet-task

phantomjs --version

1.9.8
npm WARN engine [email protected]: wanted: {"node":"0.8.x"} (current: {"node":"0.10.29","npm":"2.0.0-alpha-5"})
npm WARN optional dep failed, continuing [email protected]
npm WARN engine [email protected]: wanted: {"node":"0.8.x"} (current: {"node":"0.10.29","npm":"2.0.0-alpha-5"})
\

[email protected] install /Volumes/BoxCryptor/Development/Meteor/buildfirst/ch02/06_spritesheet-task/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/canvassmith/node_modules/canvas
node-gyp rebuild

Warnings about 'marked' wanting to be global...

I know it's a little dicey to modify the global environment, but I imagine, given the topic of the book, that you want this build to be completely clean.

At this point, 'marked' is the only one complaining about wanting to be installed globally.

npm WARN prefer global [email protected] should be installed with -g

Build error in submodule

Submodule path 'ch04/06_heroku-grunt': checked out 'd33c058f858f4b50034ad859983c21a29fafca93'
Cloning into 'ch04/08_ci-by-example'...
remote: Counting objects: 59, done.
remote: Total 59 (delta 0), reused 0 (delta 0)
Unpacking objects: 100% (59/59), done.
Checking connectivity... done.
Submodule path 'ch04/08_ci-by-example': checked out 'd4ca10ddc8bd02ab00c284bc28579049f51b27ec'
./ch01/01_lint-sample
npm ERR! install Couldn't read dependencies
npm ERR! package.json ENOENT, open '/Volumes/BoxCryptor/Development/Meteor/buildfirst/ch01/01_lint-sample/package.json'
npm ERR! package.json This is most likely not a problem with npm itself.
npm ERR! package.json npm can't find a package.json file in your current directory.

npm ERR! System Darwin 14.0.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "--prefix" "./ch01/01_lint-sample"
npm ERR! cwd /Volumes/BoxCryptor/Development/Meteor/buildfirst
npm ERR! node -v v0.10.29
npm ERR! npm -v 2.0.0-alpha-5
npm ERR! path /Volumes/BoxCryptor/Development/Meteor/buildfirst/ch01/01_lint-sample/package.json
npm ERR! code ENOPACKAGEJSON
npm ERR! errno 34
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /Volumes/BoxCryptor/Development/Meteor/buildfirst/npm-debug.log
npm ERR! not ok code 0
./ch02/01_intro-to-grunt

Grunt Spritesmith - Cannot read property 'height' of undefined

DevDependencies
"devDependencies": {
"gm": "^1.17.0",
"grunt": "~0.4.2",
"grunt-spritesmith": "^2.20.0",
"phantomjs": "^1.9.12"
}

grunt sprite:icons
--Running "sprite:icons" (sprite) task
--Fatal error: Cannot read property 'height' of undefined

install script doesn't install deps in appendix folder

The install.shscript didn't install the node module dependencies in the appendix folder. The reason might be that the install script looks for sub-folders named *_* and that none of the appendix sub-folders match that pattern.

find . -mindepth 2 -maxdepth 2 -type d -name '*_*' -print -exec npm install --prefix {} \;

If you decide to rename the appendix sub-folders in the source code, make sure to fix their names in the appendix chapters as well.

07/10_the-road-show routers/viewRouters.js has a bug

Chapter 07 examples don't seem to do anything

I go into ch07\01_backbone-views and run :

npm install
grunt build

Then I open the app.html I just get a blank html file with a title Backbone Views.

I'm sure I should be getting more than that happening. I'm also not getting any source maps created, so am unable to debug further.

I get the same for any of the examples in this chapter.

I am on Windows 7. Node v0.10.28.

Any ideas if I am doing anything wrong?

07/10_the-road-show router/viewRouter.js

var Backbone = require('backbone');
var ListItems = require('../view/list');
var AddItem = require('../view/addItem');

var list = new ListItems();
var add = new AddItem();

module.exports = Backbone.Router.extend({
    routes: {
        '': 'root'
        ,'items': 'listItems'
        ,'items/add': 'addItem'
    },
    root: function(){
        this.navigate('items', {trigger: true});
    },
    listItems: function(){
        new ListItems();
    },
    addItem: function(){
       // new AddItem();  // as this， add a number to  element which exisits in  collection， the result  =  linke_opens_count *  quantity , are not only  quantity
       /* eg:
*    1. add a new element 'banana',  quantity: 1
*    2. redo  add 'banana', quantity:  1   expect:  'banana': 2;  actual: 'banana': 3  ==> 1 + 1 * 2
*    3. redo  add 'banana', quantity:  1   expect:  'banana': 3;  actual: 'banana': 6  ==> 3 + 1 * 3
* ....
*/
      // my confirm is next, and I confirm is ok.: 
        add.updateView();  
    }
});

[ch05/03_context-scoping] Missing link to strict mode MDN article.

In the README.md file for ch05/03_context-scoping, under the "That strict mode" section, the link labelled "a nice write-up on the subject " links to an MDN article on the this keyword instead of the MDN article we get to from within the book (i.e. http://bevacqua.io/bf/strict -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode).

I think the link to the article on this should be kept, but we need to add the link to the article on strict mode, too.