Home

Awesome

<div align="center">

The Practical Book <br />on <br />Crafting Full-Stack Web & Mobile Apps

GitHub Workflow Status contributions welcome HitCount

</div>

A step-by-step guide to "Full Stack" Web & Mobile Application Development for people building beautiful, robust & maintainable apps individually or in teams!

Why?

Think/say what you like about Steve, he was right about (at least) one thing:

steve jobs learn how to code!

Considering that there are millions of "Apps" already, why should I (or anyone for that matter) bother learning how to make more of them?

This is a great question and one we ask ourselves @dwyl often!
The answer is another question: do you think all the world's problems/challenges have been resolved...? To which the answer is: not even close!

How?

Read it Online

Read it dwyl.github.io/book

Read it Offline

While viewing the online version, click the "Print" icon in the top-right of this screen: ↗️

<img width="97" alt="image" src="https://user-images.githubusercontent.com/194400/219624215-3d780055-5151-4e2e-8632-893578c4412b.png">

Then you can save the page either as HTML or PDF and read it offline without any distractions.

Run it on your localhost

Run the following commands in the Terminal on your computer:

git clone git@github.com:dwyl/book.git & cd book
cargo install mdbook
mdbook serve --open

That will open your Web Browser with the book.

Note: that cargo command assumes you have Rust installed on your machine. <br /> If you don't already, see: dwyl/learn-rust#installing

Contributing

To help us improve the book, the easiest way is to edit it directly on GitHub: dwyl/book/src

While reading the book online, simply click/tap the "Edit" button on any page:

<img width="278" alt="dwyl-book-suggest-an-edit" src="https://github.com/dwyl/book/assets/194400/ca3ed7f9-307d-4a64-ba19-4239cc710da9">

That will take you straight to the page where you can make your changes and create a Pull Request.

Editing on localhost

Just open the /src directory and edit the file you want to improve.

Note: If you get stuck, we recommend reading: rust-lang/mdBook. <br /> You don't need to know Rust to understand any of it.

<!-- ![man-who-doesnt-read](https://cloud.githubusercontent.com/assets/194400/21953123/ec35895c-da26-11e6-9240-89be328c72e4.png) _Substitute_ the word "man" for "person" and the "read" for "code" for the **21st Century** _equivalent_. [Coding is the ***new literacy***](http://www.huffingtonpost.com/the-harbus/coding-is-the-new-busines_b_11028790.html) and people who don't _make_ the time to _learn/practice_ are _destined for disappointment_. # *Why*? [![start with why](https://img.shields.io/badge/start%20with-why%3F-brightgreen.svg?style=flat)](http://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action) ## _Why_ Should _Anyone_ Learn How to Build Web Apps _Today_? > Someone _recently_ asked: "_Is software engineering a **dead end** career?_" https://www.quora.com/Is-software-engineering-a-dead-end-career It's `true` (_logical_) that ***eventually*** there _will_ be ["_enough_ apps"](http://valleywag.gawker.com/there-are-officially-too-many-apps-and-nobody-is-makin-1611128750) to _achieve_ "***all the things***" we need, but "_experts_" have been [_predicting_](https://news.ycombinator.com/item?id=11974922) the ["_end of software_"]() for the last 20 years. And yet, the _pace_ of change _continues_ to _accelerate_ and the number of _jobs_ that aren't being filled because the "***skills shortage***" has ***increased sharply*** in recent years: [bbc.co.uk/news/education-36783460](http://www.bbc.co.uk/news/education-36783460) > "***Software is eating the world***" ~ Marc Andreessen [wsj.com/articles/SB10001424053111903480904576512250915629460](http://www.wsj.com/articles/SB10001424053111903480904576512250915629460 ) **Tip**: _disable_ JS in your browser to _read_ the article without Rupert forcing you to _pay_ for knowledge! **Software is _still_ eating the world**: [techcrunch.com/2016/06/07/software-is-eating-the-world-5-years-later](https://techcrunch.com/2016/06/07/software-is-eating-the-world-5-years-later) For the _foreseeable future_ creating web & mobile app with the tools/techniques outlined in this book will be a _thing_. > "***You can mass-produce hardware; you cannot mass-produce software - you cannot mass-produce the human mind***"" ~ Michio Kaku _Thankfully_, (_or perhaps sadly depending on your view_), software cannot be _mass produced_ ***yet*** ... Should you/we be "_afraid_" of [**AI**](https://youtu.be/05bGPiyM4jg) or _embrace_ it...? A _topic_ for another time ... for _now_, focus levelling-up your skills, so you can _understand_ the AI _debate_! !["What's In It For Me?"](https://cloud.githubusercontent.com/assets/194400/21926551/1e282c10-d97a-11e6-96f9-d7074a008f0e.jpg "What's In It For Me?") ### What's "In It" For _Me_? Our "_podium_" list of what ***you*** will _gain_ by learning this "_content_": 1. The ***vocabulary*** to have **technical discussions** with web developers (_without sounding like a ["**poser**"](https://youtu.be/nB2ngWWhxEk?t=3m49s) which is **not** the same as a ["**beginner**"](https://youtu.be/kKO3dXiTl1s) ..._) even if you decide not be a full-time coder, if you know _how_ to code, you will have a _far_ more fruitful time working with technical people. 2. A chance to Meet & collaborate with ***interesting people*** on using technology to make the world a better place for everyone! 3. (_last but not least_) The "***skills*** _to pay the bills_" which will let you build your _own_ ideas or get paid (_really well_) to work on a challenge with an _existing_ team. ![image](https://cloud.githubusercontent.com/assets/194400/21952954/abe46f48-da22-11e6-97c2-4864316ceb56.png) As with _any_ skill, your coding skills are whatever you `make` of them! ## _Why_ Write a "_Book_"? The `main` reason we decided to organize our knowledge/experience as a "_book_" is because people were _using_ (_and loving_) our tutorials _individually_. [![people-find-dwyl-tutorials-useful](https://cloud.githubusercontent.com/assets/194400/21953434/b44b311a-da2e-11e6-9675-e4af89bb8eaa.png)](https://twitter.com/dwylhq/status/775016209263845377) but people _kept asking_ us: > **Question**: "_Is there an **order** in which I should follow your tutorials_...?" <br /> > **Answer**: ***Yes***! So we wanted to present our _series_ of tutorials in a _reasonably_ systematic/linear format that anyone can follow in an _order_. The reasons we did not _state_ the order of learning `before` were that: + the _sheer number_ of "_things_" to learn would have overwhelmed _us_. + there were _so many_ "_gaps_" in our documentation that we would have suffered from a _panic-induced "**blank page syndrome**" or writer's block_ and never got _started_! We are _very_ conscious of the fact that there is a "_lot to learn_" in order to build web applications. By making individual self-contained tutorials we were able to "_chunk_" the knowledge into parts that were relevant to people searching for a guide specific to that subject. The _second_ reason is to make it "_portable_". By grouping all of our tutorials in a single PDF people can put it on their e-Reader and read it "**AFK**" or even pipe it through a "screen reader" and listen as an _Audio Book_! > We wrote the _individual_ tutorials was out of _frustration_/_pain_ of working in organisations where knowledge was not distributed. Count yourself _lucky_ if you have never worked at a company where people "_hoard_" and "_guard_" their knowledge/skill/data/insight because they think it will maintain their "_power_", "_position_" or "_influence_". We @dwylhq have worked in _many_ such companies and grew weary of the "_boss_" who kept "_secrets_" or the "_subject matter expert_" that could not be fired even though they were killing team morale. ***Systematically sharing our knowledge*** is our way of avoiding that charade! # *Who*? ## ~~Readers~~ Learners Who _should_ read (_and practice_) this...? If you are (_already_) learning (_or want to learn how_) to build Web-based Applications (_that "**Work Everywhere**"_) using Open Source, ***Free*** tools, this book (_or its individual self-contained/standalone "chapters"_) will be *relevant* to you. Our _aim_ is that the content is _useful_ to ***everyone writing code*** _at_ ***any level***, but we are starting with a focus on "_complete beginner_" and will work our way up to "_advanced_", answering _any_ question you have along the journey! If _anyone_ tells you that learning to code is a bad idea, just smile and think to yourself: > "***Never mind what haters say, ignore them till they fade away***" ~ [T.I. (Live Your Life)](https://youtu.be/koVHN6eO4Xg) ## Writers Unlike _most_ other books written by *one* person or even handful of people, and "_published_" (_printed_) in paper `this` book has _**many contributors**_ and is _continuously_ evolving. > “***Alone we can do so little; together we can do so much***” ~ Helen Keller As such it is the [***Wisdom of the crowd***](https://en.wikipedia.org/wiki/Wisdom_of_the_crowd). So if you spot an issue/typo in the text/code or have a better idea (_e.g. a simpler explanation for a topic/concept_), _**please** post_ an [issue](https://github.com/dwyl/the-book/issues) (_thanks!_). # *What*? This book is a _collection_ of ***practical usage examples for tools we use to build web apps***. We ***wish*** we had `this` content `before` we _started_ coding, _instead_ we had to learn things the _hard(er)_ way _making **lots** of "**mistakes**"..._ ![never-made-any-mistatkes](https://cloud.githubusercontent.com/assets/194400/21953354/68d60342-da2c-11e6-8723-f1915ab90357.png) We have learned from our mistakes and _documented_ most of them! Hopefully it's ***useful*** to other people. ### What can we _Make_ with the Knowledge/Skills in the Book? The knowledge/skills you will gain from learning/practicing the content will allow you to build web-based applications (_that "**Work Everywhere**"_) for *many* reasons including (to): + ***Connect & communicate*** with our friends, colleagues & communities + ***Record & share*** information, knowledge, news, events, etc. + **Manage** all aspects of our lives (calendars, task/time trackers, shopping/wish lists, etc.) + **Run** organisations/businesses (_Administration, Workflow & "Management" Apps_) + **Buy/sell** things (_E-Commerce_) + ***Have fun***! (_e.g. online games! augmented/virtual reality!_) Most universities/schools (_still_) don't teach practical web skills as the *foundation* for computer science / software engineering ... there are a number of _reasons_ for this, but the primary reason is that the learning institution's curriculum is calcified by inertia... The result of people not learning "modern" web technologies at "school" is the _majority_ of companies/organisations *still* lack skills so most apps suck! We are "_fixing_" the "_problem_". <!-- If you are _still_ not writing tests _**why not**_? We _urge_ you to _read_ the *first* chapter ("_A Brief Introduction to TDD_") and decide for yourself if you _still_ think its "_too difficult_" or "_takes longer_". ### "_Free_" and Open Source...? Yes, the book is **100% _Free_ and _Open Source_** on GitHub for anyone to read and [contribute](#contribute) to! We (*strongly*) believe that ***all learning materials*** should be open and freely available to all (*not controlled or "monopolized" for profit*)! There's no "_up sell_" or "_premium_" version of _any_ of our content. Learning is not our "_business_" and we have no _intention_ of charging for any of our _content_. ![image](https://cloud.githubusercontent.com/assets/194400/21953835/78937bd6-da39-11e6-92a9-d18e79c5472d.png) Some people are of the _opinion_ that: > "_If you're **good at something**, **never do it** for **free**_." ~ The Joker (The Dark Knight) We _disagree_. </br> <b>Education is the most powerful weapon</b> </br></br> <img src="https://cdn.shopify.com/s/files/1/0661/7423/files/inspire-blog-section.jpg?16519069034986191748"></img> Obviously, putting together learning resources takes (_a lot of_) ***time*** and most people don't have a lot of "_free time_"... But we prefer to think of our knowledge sharing as an _investment_ in our people/_team(s)_ that pays _handsomely_ (_and almost **immediately**_) because it _systematically_ "_transfers knowledge_" which both improves the _pace_ of our work and reduces "_risk_" for our customers! Win-win-win-win!! ## What "Technology *Stack*" is Covered? A "stack" is the term use to describe all the components involved in a web app. The more comprehensive definition is: >"In computing, a solution stack is a set of software subsystems or components needed to create a complete platform such that no additional software is needed to support applications. Applications are said to "run on" or "run on top of" the resulting platform. > ... in a web application the architect defines the stack as the target operating system, web server, database, and programming language." A Typical Stack could include: + Linux/Unix as the ***Server*** Operating System (OS) + A ***Web Application Framework*** running on the server. Example frameworks include: + Ruby-on-Rails/Sinatra (Ruby), + Django (Python), + CodeIgniter/Symphony/Drupal (PHP), + Akka (Scala/Java), + Express.js/Meteor.js/[_**Hapi.js**_](https://github.com/nelsonic/learn-hapi) (JavaScript/Node.js), etc. + ***Phoenix*** + A ***database*** to which the (web app) framework connects. There are many databases (often referred to as "*data stores*"), the most popular are: + SQL-Based: MySQL, PostgreSQL, MariaDB + NoSQL: MongoDB, CouchDB, [_**RethinkDB**_](https://github.com/nelsonic/learn-rethinkdb/), HBase, etc + Search: [_**ElasticSearch**_](https://github.com/dwyl/learn-elasticsearch) + Key Value Store: [_**Redis**_](https://github.com/dwyl/learn-redis), LevelDB + Browser-based interactivity (*often referred to as the* "***Client***" *or* "***Front End***" *of the stack*) The "Stack" we use is _evolving_ with the industry _innovation_. Please see: https://github.com/dwyl/technology-stack/ and if you want to `#GetInvolved` in the discussion, read and comment on the issues: https://github.com/dwyl/technology-stack/issues ### You Will Learn "_In Demand_" Tech Tools/Skills You will learn 3 of the "Top 10" most popular technologies of 2016 (_which are still just as popular/relevant in 2017!_) https://stackoverflow.com/research/developer-survey-2016#technology ![stackoverflow-most-popular-technologies](https://cloud.githubusercontent.com/assets/194400/21954032/a94f0128-da3e-11e6-95d4-64757a6175e7.png) ### _Most Wanted_ Programming Languages _And_... we will _also_ cover three of the most "_Wanted_" (_i.e. in demand!_) technology skills which are _dramatically_ improving people's productivity, effectiveness and quality of output! ![stackoverflow-other-technologies](https://cloud.githubusercontent.com/assets/194400/21954067/28e98638-da3f-11e6-9e2a-0b1b080a826a.png) See: https://stackoverflow.com/research/developer-survey-2016#most-popular-technologies-other (_Click on "Wanted" tab to see the list_!) ## "*Full-Stack*" JavaScript? The term "*Full Stack*" Developer has been around for a while. We like [@laurencegellert](https://twitter.com/laurencegellert)'s explanation: > "*a Full Stack Developer is someone with* ***familiarity in each layer***, ***if not mastery in many*** *and a* ***genuine interest in all software technology***." We agree with [@peteryared](https://twitter.com/peteryared) that it's naive to expect *anyone* to be an "*expert*" in *every* aspect of our stack, but we do think that by using ***JavaScript*** as the programming language for the server (Node.js), client (*take your pick of framework!*) and datastore (*any of the NoSQL datastores which store JSON documents*), it's easier to go "full stack". See: http://techcrunch.com/2014/11/08/the-rise-and-fall-of-the-full-stack-developer/ ### "*Front End*"? There is ***one (programming) language*** that *all* web browsers "understand": ***JavaScript***. As a result it is the _most popular programming language_ (_see StackOverflow survey results above_!) Additionally you will need to know two other "languages": HTML and CSS ... but: ![stay calm](https://cloud.githubusercontent.com/assets/194400/21954158/cea1b17a-da41-11e6-9f0e-a73627125934.png) The web browser or mobile device (displaying content in a "*web view*") is referred to as the "*Front End*". ### "Back End"? When people refer to the "Back End" of an app they are describing the "*Web/Application Server*" component(s); don't worry, we will cover all of this and it's surprisingly fun! ![front-end-back-end](https://cloud.githubusercontent.com/assets/194400/21954171/039c705e-da42-11e6-93d8-7883f365e5fb.png) There are *many* technologies/languages/frameworks you can use to write your server. As stated above, for *simplicity* we prefer to use JavaScript (*Node.js*) on the server to keep one programming language across the stack and allow us to re-use view code for both server-side and client hence the _expression_ "Full-Stack"! ## Test Driven Development? This is where we _differ_ from almost _all_ the other "_beginner_" level books! We believe in writing _automated_ tests for all aspects of your application. So that is one of the _first_ things you will learn how to do! ## The Book is Not "Finished" Yet, Should I Start Reading It? The answer is: ***it depends***. If you can handle a few typos and want to get started building better Apps ASAP, then start *now*! If you prefer to wait till its "ready", please star the repo, and come back later. ## Star the Project :star: The _easiest_ way you can _contribute_ is by "_starring_" this project on GitHub! This will help you to "_bookmark_" the content so you can return to it. But it will also help the people who "_follow_" you on GitHub to _discover_ that you find it _interesting_ or _useful_. The _more_ people star and _share_ the project, the more possible contributors are able to understand the value of contributing and *open sourcing their knowledge*! <!-- we need an "_official_" dwyl book tweet ... ## Spreading the Word >> *Please Re-Tweet*! [![initial tweet anouncing book](https://raw.githubusercontent.com/dwyl/the-book/master/manuscript/images/pfst-initial-tweet-with-retweets.png)](https://twitter.com/nelsonic/status/607053734502375424) *click on the image to re-tweet!* (*thanks!*) last year I did write a-page-a-day but not all in _one_ place...!! and now we will have an "ad hoc but regular" cycle ... ## Release Schedule *Each day* for the next 4 months I will be writing *at least* 1 page and pushing it to GitHub (*which triggers the book publish script on LeanPub*) so there will be fresh content *every day*! I promise to make every effort to keep the signal-to-noise ratio as good as possible! ## Contributing [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/esta/issues) We hope this will be a (*highly*) ***collaborative*** effort! (We don't believe in the "*lone wolf*" or "*basement genius*" approach to building things... we prefer the many minds/eyes/ideas of Open Source culture!) > "_It is **amazing** what you can **accomplish** if you **do not care who gets** the **credit**_" ~ Harry Truman ### Got Comments/Ideas/Suggestions/Issues ? If you have any ideas, comments or suggestions, please raise an issue on GitHub: https://github.com/dwyl/the-book/issues ### Watching the Repo (*to receive ALL the updates!*) If you want to receive ***ALL*** the updates, you _can_ **Watch** the GitHub repository. **Note**: you may get quite a few emails... but if you are interested in building great quality software the content should be relevant to you. <!-- Should we *bother* with "LeanPub"...? see: https://github.com/dwyl/the-book/issues/64 ### The Book is Open Source, Why is LeanPub Charging? Yes, the book is (*and will always be!*) ***100% Open Source***, but LeanPub is kindly providing a way of "packaging" it up for people to read on their devices in the form of a (*[DRM-FREE](https://en.wikipedia.org/wiki/Digital_rights_management#Opposition_to_DRM)*) **PDF** (*readable on any device*) **Mobi** (*for our friends with kindle*) and **EPUB** (*for iDevices and Macs with iBooks*) they have infrastructure to pay for, so I think its fair to pay a fee for the service they provide ... Don't worry, its not "freemium" ... ![freemium is not free](https://raw.githubusercontent.com/dwyl/the-book/master/manuscript/images/00-freemium-not-really.jpg) We are posting every word open on github, so if you don't *want or need* the Kindle or iBooks version, just read it online for *free*. ## Proceeds of Sale >> *South African Technology School* ***ALL*** the proceeds (*after LeanPub fees*) from the sale of this book will go into the #[**dwyl**](https://github.com/dwyl/) fund for the ***South African Technology School*** we plan to *build* in **2016** in our quest to create (*well-paid +remote*) Tech Jobs in Africa! [![BBC Video of School in Africa](https://raw.githubusercontent.com/dwyl/the-book/master/manuscript/images/00-bbc-school-video-screenshot.png)](http://www.bbc.co.uk/education/clips/zjh4d2p "BBC Video of School in South Africa") If after watching [*this video*](http://www.bbc.co.uk/education/clips/zjh4d2p) you aren't inspired to get involved, please let us know what *does* make you tick and we can donate the proceeds of your copy of the book to a different charity. ## Low on Cash? ![No Money?](https://raw.githubusercontent.com/dwyl/the-book/master/manuscript/images/00-empty-pockets-no-money.jpg) If you are a student and/or low on cash (*we've all been there*!) but still want to learn how to build great quality software, please [***personal-message me***](https://twitter.com/nelsonic) ## Preview Link https://leanpub.com/the-practical-book-on-full-stack-javascript-web-application-test-driven-development/preview/links ## History (*[tl;dr](https://en.wiktionary.org/wiki/TL;DR)*) I, [_**@nelsonic**_](https://github.com/nelsonic) started writing tutorials on Test Driven Development (TDD) out of ***frustration*** when (_some individuals in_) my *then* team *complained* that "_testing/TDD is 'hard' and takes too long..._". It seemed *logical* to publish the tutorials as step-by-step guides on GitHub (_as opposed to a company wiki or Google Docs which I had done before..._) so that complete strangers could benefit from the learning and submit ideas for improvement or requests for more detail via [questions (issues)](https://github.com/dwyl/the-book/issues), _updates_ or _corrections_ (_e.g. updating a link or fixing a typo!_) in the form of GitHub Pull Requests. A few (*hundred*) GitHub stars (_and encouraging feedback messages_) later, we created a GitHub [_Community_](https://github.com/dwyl) (_Organisation_) dedicated to curating coding tutorials: https://github.com/dwyl (_which now has **many active members**_) and _collaboratively building useful tools using code_ which _any_ organisation/school/business can use ***free of charge***! All coding examples for this book are released as self-contained/standalone tutorials so you can *selectively learn* a *specific* tool/technique/technology and share *just* that one _byte_ of learning with your team (_or that one **special person** in your life who you know has **infinite potential** but keeps making excuses to not get with the program!_) # Ready to get Started?! -->