Client Server Architecture

A great deal of our digital world depends on a little technique discovered out of necessity in the early days of computing. This paradigm of how digital devices communicate and co-operate, makes the entirety of the internet possible and efficient. So to understand information technology and online content delivery, you must understand what client-server architecture is.

client-server-diagram-internet

The basics of the client-server model are in the name; It is a system that includes a client and a server, and the client-server model works as a series of transactions between the two. The client initiates the transaction by sending a request to the server, and the server, which is always in a state of readiness to accept requests, responds by providing a service or resource to the client. That is the core principle of the client-server model. In most implementations of client-server architecture, the server is one or a few, and the clients are many. This centralization of resources and services with the server is the main utility of this paradigm and is how it was first introduced into the digital realm.

When you browse the web today, your browser software on your desktop computer or mobile device is the client. In the simplified transaction, for the sake of explanation, you enter a URL into your browser to visit a website. Your browser, the client, connects to the computer that holds the website you want to visit, the server, and sends a request for the website using a standard called the Hyper Text Transfer Protocol (hence http://). The server accepts this request and sends a response to your browser along with the requested data if available. If you entered the right address and the website is live, the server sends the browser the appropriate HTML page and you see the homepage on your screen. If there was an error, the server responds with an error code, such as 404, when it can’t find the page you requested. That, in a nutshell, is the client-server architecture of the world wide web in action.

client-server-diagram-mysql

An important point to grasp here is that client and server are not fixed and unchanging entities, but merely the roles played by devices and software during a particular transaction. A device that is a server for one transaction can then switch to being a client in another. To continue with our example of the browser and the web server, when the computer that stores the website receives a request for a page from your browser, it is behaving as a server and responds directly if the page to be displayed is static HTML. However, if the website is a dynamic one, based on a content management system such as WordPress or Drupal, the data is not stored as static HTML files but rather in a database, often located on a separate computer that hosts multiple databases for efficiency. At this point in the transaction the original web server becomes a client and sends a request for data to a MySQL database server. Once the web server receives the requested data from the database server, it reverts to being a server in the original transaction and sends the page to your browser where it is displayed. These client and server modes of a particular device are usually happening concurrently, with multiple transactions in progress, rather than that simplified consecutive way described here, but this should have made the sometimes fluid nature of the client-server relationship clear.

The Web Stack

Understanding that software is commonly layered together to create a computing experience is important. Although there are many combinations and approaches the most popular ‘stack’ or group of open source technologies used to bring almost all websites to the world is the LAMP website.

LAMP is an acronym for the 4 software layers that create the web stack.

These are the components of LAMP:

webstack

L – Linux – an open source operating system
A – Apache – an open source web server
M – MySQL – an open source database server
P – PHP – a programming language

An easy way to have this same functionality on a Mac is by installing MAMP or following the instructions to enable AMP on OSX.

If you’d like to install Apache, MySQL and PHP with command line, then this is the tutorial for you: How To Set Up Apache MySQL and PHP with Homebrew

Reference: Shedding Light on the LAMP Stack

Web Technologies 01

This course relies on a foundational knowledge of Web technology. You’ll hear a great deal of acronyms and jargon thrown around by essentially every website you see is HTML, CSS and Javascript at its elemental level.

html-css-js-diagram

HTML (Hypertext Markup Language) is a markup language that provides the structure, content and pulls in CSS and Javascript. To learn about HTML see this Lynda.com module

CSS (Cascading Style Sheets) is how the HTML file tells the browser how it would prefer to be displayed and provides all the information about the presentation of the content. To learn about CSS see this Lynda.com module

Javascript is the programming language that provides the behaviours for the HTML. To learn about Javascript see this Lynda.com modules

 

Essential Javascript Links

# Essential JavaScript Links

A curated list by Eric Elliott and friends. Suggest links in the comments below.

This is a very exclusive collection of only must-have JavaScript links. I’m only listing my favorite links. Nothing else makes the cut. Feel free to suggest links if you think they’re good enough to make this list.

## Required Reading (Online resources)

* Learn JavaScript Essentials (for all skill levels) – One clear path to JavaScript mastery
* JavaScript Training Sucks 99 out of 100 JS developers lack the skills they need to fill hundreds of thousands of jobs. We can change that.
* The Two Pillars of JavaScript Part 1: Prototypal OO
* The Two Pillars of JavaScript Part 2: Functional Programming
* JavaScript Objects An excellent explanation of inheritance in JavaScript by Kyle Simpson
* Isomorphic JavaScript
* JavaScript Application Architecture on the Road to 2015 – Addy Osmani
* Reactive MVC and the Virtual DOM Great read, even if you’re not a React user.
* Introduction to Reactive Programming
* The General Theory of Reactivity What is all this talk about reactive? Functional? Promises? This is the beginning of a reactive programming bible.
* ES6 Generators A series of blog posts by Kyle Simpson
* Typed JavaScript – Excellent post about the state of typed JavaScript by Axel Rauschmayer
* Taming the Asynchronous Beast with CSP in JavaScript – James Long
* ES6 Modules: The Final Syntax by @rauschma #AMDisDead
## Required Viewing
* [Asynchronous Programming at Netflix](https://www.youtube.com/watch?v=gawmdhCNy-A) – [Jafar Husain](https://twitter.com/jhusain)
* [David Nolen: Immutability: Putting The Dream Machine To Work](https://www.youtube.com/watch?v=SiFwRtCnxv4) – [David Nolen](https://twitter.com/swannodette)
* [Delivering the Goods](https://www.youtube.com/watch?v=R8W_6xWphtw) Paul Irish on one of the most important but overlooked topics in the development world today – page load times.

## Spec

* [ES5 Spec](http://es5.github.io/) An annotated, hyperlinked version of the ES5 spec
* [ES6 draft](https://people.mozilla.org/~jorendorff/es6-draft.html)
## Books

* [JavaScript for Kids](http://www.amazon.com/gp/product/B00QL616QE?ie=UTF8&camp=213733&creative=393177&creativeASIN=B00QL616QE&linkCode=shr&tag=ericleads-20&linkId=6AOODC27L6URY3K2)
* [Eloquent JavaScript](http://eloquentjavascript.net/)
* [JavaScript: The Good Parts](http://www.amazon.com/gp/product/0596517742?ie=UTF8&camp=213733&creative=393185&creativeASIN=0596517742&linkCode=shr&tag=ericleads-20&linkId=IJKESYSOTWGC27DR)
* [Effective JavaScript](http://www.amazon.com/gp/product/0321812182?ie=UTF8&camp=213733&creative=393185&creativeASIN=0321812182&linkCode=shr&tag=ericleads-20&linkId=JIC63I267I6UDQQZ)
* [Programming JavaScript Applications](http://pjabook.com)
* [JavaScript: The Definitive Guide](http://www.amazon.com/gp/product/0596805527?ie=UTF8&camp=213733&creative=393185&creativeASIN=0596805527&linkCode=shr&tag=ericleads-20&linkId=AENIF5KLRQI3N335)
* [You Don’t Know JS](https://github.com/getify/You-Dont-Know-JS)
* [Understanding ECMAScript 6](https://leanpub.com/understandinges6/read/) by Nicholas C. Zakas
* [Node.js in Action](http://www.manning.com/cantelon/)
* [The Dream Machine: J.C.R. Licklider and the Revolution That Made Computing Personal](http://www.amazon.com/gp/product/0670899763?ie=UTF8&camp=213733&creative=393177&creativeASIN=0670899763&linkCode=shr&tag=ericleads-20&linkId=NDUXYQOCMPC47SQI)
## Dev tools & collaboration

* [nvm](https://github.com/creationix/nvm) First install this…
* [Node](http://nodejs.org/) Then install Node (with nvm). You’ll need this even if you’re a front-end dev.
* [npm](https://www.npmjs.com/) Install lots of other things with npm. **The package manager for JavaScript.** Comes with Node.
* [Sublime Text 3](http://www.sublimetext.com/3)
* [Node Inspector](https://github.com/node-inspector/node-inspector) Debug Node code with the Chrome debug tools
* [TraceGL](https://github.com/traceglMPL/tracegl) Powerful runtime analysis of live JavaScript code
* [Tern](http://ternjs.net/) Static analysis in JavaScript
* [JSDoc](http://usejsdoc.org/) – Pair with [Tern](http://ternjs.net/) for static analysis
* [Nitrous.IO](https://www.nitrous.io/join/uJcRo6yQDvs?utm_source=nitrous.io&utm_medium=copypaste&utm_campaign=referral) (Supports live collaboration / pair programming)
* [Slack](http://slack.com) Chat for teams, with GitHub and Google hangouts integration
* For hangouts, just type /hangout in any channel
* [PrettyDiff](http://prettydiff.com/)
* [ES6 Fiddle](http://www.es6fiddle.net/)
## Building

* [Browserify](http://browserify.org/) Bundle modules for the browser.
* [How to use NPM as a Build Tool](http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/)
### Lint / Quality checkers

* [JSHint](http://jshint.com/)
* [ESLint](http://eslint.org/)
* [Istanbul](https://github.com/gotwarlost/istanbul) Code coverage reporting
* [tape](https://github.com/substack/tape) and [faucet](https://github.com/substack/faucet) for dead simple unit testing.
### Transpilers

* [6to5](https://github.com/6to5/6to5) (ES6)
* [CoffeeScript](http://coffeescript.org/)
* [Emscripten](http://kripken.github.io/emscripten-site/) (frequently used for C/C++ JavaScript ports)
* [Traceur](https://github.com/google/traceur-compiler) (ES.next)
* [ES6 tools](https://github.com/addyosmani/es6-tools) Addy Osmani’s ES6 Tools list
## JavaScript environments

* [Node.js](http://nodejs.org/) Server side JavaScript and more
* [io.js](https://iojs.org/) – The Node fork
## Libraries

* [es5-shim](https://github.com/es-shims/es5-shim) Stable, production ready.
* [es6-shim](https://github.com/es-shims/es6-shim/) Somewhat stable, but a few things I thought were solid got shifted to ES7.
* [es7-shim](https://www.npmjs.com/package/es7-shim) Experimantal. Use with caution.
* [native-promise-only](https://github.com/getify/native-promise-only) An ECMAScript standard promise polyfill by Kyle Simpson
* [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) A [WHATWG fetch](https://fetch.spec.whatwg.org/) standard polyfill
* [jQuery](http://jquery.com/) Yes, [I still use jQuery](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o/edit#) and so do 61% of the top 100,000 websites – for good reason.
* [Blaze](http://meteor.github.io/blaze/) DOM-diffing isomorphic reactive templates from Meteor
* [RxJS](https://github.com/Reactive-Extensions/RxJS) Reactive extensions for JavaScript. [What’s reactive?](https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4)
* [Moment](http://momentjs.com/docs/) A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.
* [Globalize](https://github.com/jquery/globalize) i18n / translate your app for many languages and locations (locales)
* [Express](http://expressjs.com/) The most popular framework for Node
* [Stampit](https://github.com/ericelliott/stampit) Stampit – create objects from reusable, composable behaviors. Prototypal inheritance with stamps.
* [Credential](https://github.com/ericelliott/credential) If you write Node apps with password logins, you need Credential
* [cuid](https://github.com/ericelliott/cuid) GUIDs are broken – use cuid, instead
* [velocity](http://julian.com/research/velocity/) & [Velocity Motion Designer (VMD)](http://julian.com/research/velocity/#vmd) UI animation library
* [json-schema](https://github.com/kriszyp/json-schema) – Great for model validations
## Web Components

* [FIRST](http://addyosmani.com/first/)
* [Polyfills](http://webcomponents.org/polyfills/)
* [HTML Imports](http://webcomponents.org/articles/introduction-to-html-imports/)
* [Custom Elements](http://webcomponents.org/articles/introduction-to-custom-elements/)
* [Templates](http://webcomponents.org/articles/introduction-to-template-element/)
* [Shadow DOM](http://webcomponents.org/articles/introduction-to-shadow-dom/)
* [x-gif](http://geelen.github.io/x-gif/#/http://i.imgur.com/iKXH4E2.gif) This web component wins the internet.
## QA / Deployment / Monitoring / CI

* [PM2](https://github.com/Unitech/pm2) Process monitoring / self repair
* [New Relic](http://newrelic.com/) Deep insights into the performance and health of your production apps
* [Sauce Labs](https://saucelabs.com/) Cross platform web application testing with great collaboration and integration support
* [Travis CI](https://travis-ci.org/) CI, of course
* [Docker](https://www.docker.com/) Run your CI process using the same OS configs as your production systems.
* [Shippable](https://www.shippable.com/) Docker-based hosted build / CI
## Community

* [ES Discuss](https://esdiscuss.org/) The mailing list where all the ECMAScript standard discussion action is.
* [JavaScript on Google+](https://plus.google.com/communities/100875929141897651837)
* [HTML5 on Google+](https://plus.google.com/communities/103299867207875326585)
* [Node.js on Google+](https://plus.google.com/communities/115365528781941125390)
* IRC ##JavaScript irc://irc.freenode.net/javascript
* IRC #node.js irc://irc.freenode.net/node.js
* IRC #io.js irc://irc.freenode.net/io.js – the Node fork
## News
* [JavaScript Weekly](http://javascriptweekly.com/)
* [Node Weekly](http://nodeweekly.com/)
* [HTML5 Weekly](http://html5weekly.com/)
* [EchoJS](http://www.echojs.com/)
* [DailyJS](http://dailyjs.com/)
* [JavaScript Jabber](http://devchat.tv/js-jabber/)
## Pasting / sharing code

* [Codepen](http://codepen.io/pen/)
* [RequireBin](http://requirebin.com/)
## Contests

* [DemoJS](http://demojs.org/) The JavaScript demoscene party
* [JS1k](http://js1k.com/) JavaScript domes in 1k of memory
* [JS13k Games](http://js13kgames.com/) JavaScript games in 13k of memory
* [FightCode game](http://fightcodegame.com/) program virtual battle bots and climb the leaderboard
* [Node Knockout](http://nodeknockout.com/) The legendary Node competition
## Hackable Hardware

* [Nodebots](http://nodebots.io/)
* [Cylon](http://cylonjs.com/)
* [Nodecopter](http://www.nodecopter.com/)
* [Tessel](https://tessel.io/)
* [Espruino](http://www.espruino.com/)
## Hosting

* [DigitalOcean](https://www.digitalocean.com/?refcode=fdcfedac5208)
## Twitter (alphabetical order)

* [Addy Osmani](https://twitter.com/addyosmani) – App architecture expert, Chrome dev tools champion
* [Angus Croll](https://twitter.com/angustweets) – Author, “If Hemingway Wrote JavaScript”
* [Axel Rauschmayer](https://twitter.com/rauschma) – ES Next evangelist, author
* [Brendan Eich](https://twitter.com/BrendanEich) – Created JavaScript
* [David Nolen](https://twitter.com/swannodette) – Great functional programming content
* [David Herman](https://twitter.com/littlecalculist) – Author, “Effective JavaScript”
* [EchoJS](https://twitter.com/echojs) – News and links
* [Eric Elliott](https://twitter.com/_ericelliott) – That’s me. O’Reilly author. JavaScript architect. JS Instructor.
* [Jafar Husain](https://twitter.com/jhusain) – Great talks on RxJS, ES next, etc…
* [James Halliday](https://twitter.com/substack) aka Substack – author of ~one million~ Node modules you probably use.
* [James Long](https://twitter.com/jlongster) – CSP, functional programming advocate, Mozilla developer
* [JavaScript Cheerleader](https://twitter.com/JS_Cheerleader) – Mover & shaker, JavaScript evangelist, documentary film maker
* [JavaScript Daily](https://twitter.com/JavaScriptDaily) – News and links
* [Jordan Harband](https://twitter.com/ljharb) – Keeping us ahead of the JS curve
* [Kyle Simpson](https://twitter.com/getify) – Author, YDKJS – O’Reilly, JS Instructor, open web evangelist
* [Marijn Haverbeke](https://twitter.com/marijnjh) – Author, “Eloquent JavaScript”
* [Nicholas C. Zakas](https://twitter.com/slicknet) – Author, speaker
* [Nick Morgan](https://twitter.com/skilldrick) – Author, “JavaScript for Kids”
* [Paul Irish](https://twitter.com/paul_irish) – Developer evangelist, Chrome dev tools champion
* [Reginald Braithwaite](https://twitter.com/raganwald) – Author, “JavaScript Allongé”, speaker, GitHub
* [YDKJS](https://twitter.com/ydkjs) – You Don’t Know JS, O’Reilly book series by Kyle Simpson