Rapid Prototyping with JS Agile javascript Development

233 Pages·2014·6.67 MB·English

by  Azat Mardan

Rapid Prototyping with JS
Agile JavaScript Development
Azat Mardan
Thisbookisforsaleathttp://leanpub.com/rapid-prototyping-with-js
Thisversionwaspublishedon2014-05-28
ThisisaLeanpubbook.LeanpubempowersauthorsandpublisherswiththeLeanPublishingprocess.Lean
Publishingistheactofpublishinganin-progressebookusinglightweighttoolsandmanyiterationstoget
readerfeedback,pivotuntilyouhavetherightbookandbuildtractiononceyoudo.
©2012-2014AzatMardan
Tweet This Book!
PleasehelpAzatMardanbyspreadingthewordaboutthisbookonTwitter!
Thesuggestedtweetforthisbookis:
I’vedownloadedRapidPrototypingwithJS—bookonJavaScriptandNode.jsby@azat_co#RPJS
@RPJSbook
Thesuggestedhashtagforthisbookis#RPJS.
Findoutwhatotherpeoplearesayingaboutthebookbyclickingonthislinktosearchforthishashtagon
Twitter:
https://twitter.com/search?q=#RPJS
Also By Azat Mardan
OhMyJS
Express.jsGuide
JavaScriptandNodeFUNdamentals
Contents
WhatReadersSay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i
RapidPrototypingwithJSontheInternet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ii
Acknowledgment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv
WhyRPJS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv
WhattoExpect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv
WhoThisBookisFor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v
WhatThisBookisNot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v
Prerequisites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v
HowtoUsetheBook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vi
Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
Notation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii
Terms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii
AbouttheAuthor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
I QuickStart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1 Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1 Front-EndDefinitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1.1 BiggerPicture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1.2 HyperTextMarkupLanguage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1.3 CascadingStyleSheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.1.4 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.2 AgileMethodologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.2.1 Scrum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.2.2 Test-DrivenDevelopment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.2.3 ContinuousDeploymentandIntegration . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.2.4 PairProgramming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.3 Back-EndDefinitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.3.1 Node.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.3.2 NoSQLandMongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.3.3 CloudComputing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
CONTENTS
1.3.4 HTTPRequestsandResponses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.3.5 RESTfulAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2 Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.1 LocalSetup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.1.1 DevelopmentFolder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.1.2 Browsers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.1.3 IDEsandTextEditors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.1.4 VersionControlSystems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.1.5 LocalHTTPServers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.1.6 Database:MongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.1.7 OtherComponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.1.7.1 Node.jsInstallation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.1.7.2 JSLibraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.1.7.3 LESSApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2.2 CloudSetup. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
2.2.1 SSHKeys . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
2.2.2 GitHub . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
2.2.3 WindowsAzure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
2.2.4 Heroku. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
2.2.5 Cloud9 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
II Front-EndPrototyping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3 jQueryandParse.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.1 Definitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.1.1 JavaScriptObjectNotation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.1.2 AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
3.1.3 Cross-DomainCalls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
3.2 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
3.3 TwitterBootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
3.4 LESS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
3.4.1 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
3.4.2 Mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
3.4.3 Operations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
3.5 Exampleofusingthird-partyAPI(Twitter)andjQuery . . . . . . . . . . . . . . . . . . . . . 50
3.6 Parse.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
3.7 ChatwithParse.comOverview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
3.8 ChatwithParse.com:RESTAPIandjQueryversion . . . . . . . . . . . . . . . . . . . . . . . 61
3.9 PushingtoGitHub . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
3.10 DeploymenttoWindowsAzure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
3.11 DeploymenttoHeroku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
3.12 UpdatingandDeletingofMessages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
4 IntrotoBackbone.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
CONTENTS
4.1 SettingupBackbone.jsAppfromScratch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
4.1.1 Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
4.2 WorkingwithCollections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
4.3 EventBinding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
4.4 ViewsandSubviewswithUnderscore.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
4.5 Refactoring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
4.6 AMDandRequire.jsforDevelopment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
4.7 Require.jsforProduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
4.8 SuperSimpleBackboneStarterKit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
5 Backbone.jsandParse.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
5.1 ChatwithParse.com:JavaScriptSDKandBackbone.jsversion . . . . . . . . . . . . . . . . . 119
5.2 DeployingChattoPaaS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
5.3 EnhancingChat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
III Back-EndPrototyping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
6 Node.jsandMongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
6.1 Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
6.1.1 Building“HelloWorld”inNode.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
6.1.2 Node.jsCoreModules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
6.1.3 NodePackageManager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
6.1.4 Deploying“HelloWorld”toPaaS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
6.1.5 DeployingtoWindowsAzure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
6.1.6 DeployingtoHeroku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
6.2 Chat:Run-TimeMemoryVersion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
6.3 TestCaseforChat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
6.4 MongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
6.4.1 MongoDBShell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
6.4.2 MongoDBNativeDriver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
6.4.3 MongoDBonHeroku:MongoHQ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
6.4.4 BSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
6.5 Chat:MongoDBVersion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
7 PuttingItAllTogether . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
7.1 DifferentDomainDeployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
7.2 ChangingEndpoints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
7.3 ChatApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
7.4 Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
7.5 SameDomainDeployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
8 BONUS:WebapplogArticles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
8.1 AsynchronicityinNode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
8.1.1 Non-BlockingI/O . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
8.1.2 AsynchronousWayofCoding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
8.2 MongoDBMigrationwithMonk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
CONTENTS
8.3 TDDinNode.jswithMocha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
8.3.1 WhoNeedsTest-DrivenDevelopment? . . . . . . . . . . . . . . . . . . . . . . . . . . 177
8.3.2 QuickStartGuide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
8.4 Wintersmith—StaticSiteGenerator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
8.4.1 GettingStartedwithWintersmith . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
8.4.2 OtherStaticSiteGenerators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
8.5 IntrotoExpress.js:SimpleRESTAPIappwithMonkandMongoDB . . . . . . . . . . . . . . 182
8.5.1 RESTAPIappwithExpress.jsandMonk . . . . . . . . . . . . . . . . . . . . . . . . . 182
8.6 IntrotoExpress.js:Parameters,ErrorHandlingandOtherMiddleware . . . . . . . . . . . . . 186
8.6.1 RequestHandlers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
8.6.2 ParametersMiddleware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
8.6.3 ErrorHandling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
8.6.4 OtherMiddleware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
8.6.5 Abstraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
8.7 JSONRESTAPIserverwithNode.jsandMongoDBusingMongoskinandExpress.js . . . . . 192
8.7.1 TestCoverage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
8.7.2 Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
8.7.3 Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
8.7.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
8.8 Node.jsMVC:Express.js+DerbyHelloWorldTutorial . . . . . . . . . . . . . . . . . . . . . 201
8.8.1 NodeMVCFramework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
8.8.2 DerbyInstallation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
8.8.3 FileStructure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
8.8.4 Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
8.8.5 Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
8.8.6 MainServer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
8.8.7 DerbyApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
8.8.8 LaunchingHelloWorldApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
8.8.9 PassingValuestoBack-End . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
ConclusionandFurtherReading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
FurtherReading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
JavaScriptresourcesandfreeebooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
JavaScriptbooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Node.jsresourcesandfreeebooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Node.jsbooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Interactiveonlineclassesandcourses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Startupbooksandblogs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
What Readers Say
“Azat’stutorialsarecrucialtothedevelopmentofSidepon.com¹interactiveUXandthesuccess
of getting us featured on TheNextWeb.com² and reached profitability.” — Kenson Goo (Side-
pon.com³)
“I had a lot of fun reading this book and following its examples! It showcases and helps you
discoverahugevarietyoftechnologiesthateveryoneshouldconsiderusingintheirownprojects.”
—ChemaBalsas
Rapid Prototyping with JS is being successfully used at StartupMonthly⁴ as a training⁵ manual. Here are
someofourtrainees’testimonials:
“ThanksalottoallandspecialthankstoAzatandYuri.Ienjoyeditalotandfeltmotivatedto
workhardtoknowthesetechnologies.”—ShellyArora
“Thanksforputtingthisworkshoptogetherthisweekend…whatwedidwithBootstrap+Parse
wasreallyquick&awesome.”—MariyaYao
“ThanksYuriandallofyoufolks.Itwasagreatsession-veryeducative,anditcertainlyhelped
mebrushuponmyJavascriptskills.Lookforwardtoseeing/workingwithyouinthefuture.”—
SamSur
¹http://Sidepon.com
²http://thenextweb.com
³http://Sidepon.com
⁴http://startupmonthly.org
⁵http://www.startupmonthly.org/rapid-prototyping-with-javascript-and-nodejs.html
Rapid Prototyping with JS on the Internet
Let’sbeFriendsontheInternet
• Twitter:@RPJSbook⁶and@azat_co⁷
• Facebook:facebook.com/RapidPrototypingWithJS⁸
• Website:rapidprototypingwithjs.com⁹
• Blog:webapplog.com¹⁰
• GitHub:github.com/azat-co/rpjs¹¹
• Storify:RapidPrototypingwithJS¹²
OtherWaystoReachUs
• Email:[email protected]¹³
• GoogleGroup:[email protected]¹⁴andhttps://groups.google.com/forum/#!forum/rpjs
ShareonTwitter
“I’mreadingRapidPrototypingwithJS—bookonagiledevelopmentwithJavaScriptandNode.js
by@azat_co#RPJS@RPJSbook” —http://clicktotweet.com/biWsd
⁶https://twitter.com/rpjsbook
⁷https://twitter.com/azat_co
⁸https://www.facebook.com/RapidPrototypingWithJS
⁹http://rapidprototypingwithjs.com/
¹⁰http://webapplog.com
¹¹https://github.com/azat-co/rpjs
¹²https://storify.com/azat_co/rapid-prototyping-with-js
¹³mailto:[email protected]
¹⁴mailto:[email protected]