SWE 432, Fall 2017 Design and Implementation of Software for the Web Today

• HW1 due next Tuesday

• Material from last time: properties review, cascades

• Web Development Tools

• Version control with Git

• Running JavaScript

LaToza GMU SWE 432 Fall 2017 2 JSON vs. objects

var obj1 = { prop: "value" }; var obj2 = { prop: 'value' }; var obj3 = { 'prop': "value" }; var obj4 = { "prop": "value" };

• All will create an object.

• obj1 or obj2 preferred syntax. Should try to be consistent.

• Only obj4 is valid JSON

var obj5 = { "prop": "'value'" }; var obj6 = { "prop": "\"value\"" };

• Can use different quote types for nesting. Or use \ to escape.

LaToza GMU SWE 432 Fall 2017 3 Cascade Pattern

• aka “chaining” • Offer set of operations that mutate object and returns the “this” object • Build an API that has single purpose operations that can be combined easily • Lets us read code like a sentence • Example (String): str.replace("k","R").toUpperCase().substr(0,4); • Example (jQuery): $(“#wrapper") .fadeOut() .(“Welcome") .fadeIn();

LaToza/Bell GMU SWE 432 Fall 2016 4 Version Control We’ve always had some kind of version control

Carbon copies? Git

• One of the latest generation of Version Control Systems (VCS)

• Came out of the development community

• Fast

• Supports non-linear development

• Fully distributed (no need for “central” server)

• Able to handle large projects effectively

LaToza GMU SWE 432 Fall 2017 7 Linear vs Nonlinear Development Distribution Model Centralized Model

Examples: CVS, Subversion, Perforce Distribution Model Centralized Model Distributed Model

Examples: CVS, Subversion, Perforce Examples: Git, Mercurial No central point of failure No latency when doing most operations GitHub

• You don’t need a central server to use git

• But it sure makes it easier

• GitHub: Free open source hosting site

• For students, free private repositories too!

• Set up a user account

• Create a repository

• Add collaborators

LaToza GMU SWE 432 Fall 2017 11 Git, High level

Workspace Index Local repository Remote repository add commit

commit -a push

pull

fetch checkout

diff

E.g. The files you see Git’s local record of changes Git’s local repository E.g. GitHub

LaToza GMU SWE 432 Fall 2017 12 Typical Use Case

Person 1 Person 2

Create Project & Repo Push to Github Clone from Github Edit/commit Edit/commit/push Edit/commit Edit/commit Edit/commit Edit/commit Pull/push

Pull/push Github Git Resources

https://try.github.io/levels/1/challenges/1

Download and install git: https://git-scm.com/downloads

Also: Git Cheat Sheet https://services.github.com/kit/downloads/github-git-cheat- sheet.pdf IDEs Integrated Development Environments (IDEs)

• Integrates everything you need to develop into a single environment

• E.g. text editor (with complex highlighting, auto complete, etc), version control access, debugger, etc.

• You don’t have to use one. It sure makes things handy though!

• We recommend you use WebStorm for this class. You can get a free student license: https:// www.jetbrains.com/student/

LaToza GMU SWE 432 Fall 2017 16 Executing JavaScript Options for executing JavaScript

• Client Side

• Pastebin—useful for debugging & experimentation

• script tag inline—traditional mechanism

• script include

• Server Side

• node.js—webserver for JavaScript backends

LaToza GMU SWE 432 Fall 2017 18 Hello world

var course = { name: 'SWE 432’ }; console.log(`Hello ${ course.name }!`);

LaToza GMU SWE 432 Fall 2017 19 Demo: Pastebin

• Careful: be sure to use correct quote character!

LaToza GMU SWE 432 Fall 2017 20 Demo: Script Tag Inline

hello.html

LaToza GMU SWE 432 Fall 2017 21 Demo: Script Tag Include

hello.html

LaToza GMU SWE 432 Fall 2017 22 Node.js

• Node.js is a runtime that lets you run JS outside of a browser

• We’re going to write backends with Node.js

• Why use Node?

• Easy to get into after learning JS (it’s JS)

• Event based: really efficient for sending lots of quick updates to lots of clients

• Why not use Node?

• Bad for CPU heavy stuff

• Download and install it: https://nodejs.org/en/

• We recommend LTS (LTS -> Long Term Support, designed to be super stable)

LaToza GMU SWE 432 Fall 2017 23 Demo: Node.js

LaToza GMU SWE 432 Fall 2017 24 Node Working with libraries

• What’s wrong with this?

• No standard format to say:

• What’s the name of the module?

• What’s the version of the module?

• Where do I find it?

• Ideally: Just say “Give me React 15 and everything I need to make it work!”

LaToza GMU SWE 432 Fall 2017 26 A better way for modules

• Describe what your modules are

• Create a central repository of those modules

• Make a utility that can automatically find and include those modules

Your app Assumes dependencies magically exist

Dependencies Declares what modules you need

Modules that magically appear Configuration Package Manager Provides the modules to your app

LaToza GMU SWE 432 Fall 2017 27 : Not an acronym, but the Node Package Manager

• Bring order to our modules and dependencies Generated by npm commands: { • Declarative approach: "name": "helloworld", "version": "1.0.0", "description": "", • “My app is called helloworld” "main": "index.js", "scripts": { "test": "echo \"Error: no test • “It is version 1” specified\" && exit 1" }, "author": "", • You can run it by saying “node "license": "ISC", index.js” "dependencies": { "express": "^4.14.0" } • “I need express, the most recent } version is fine”

• Config is stored in - specifically package.json

LaToza GMU SWE 432 Fall 2017 28 Installing tools with NPM

npm install -g

• Installing module globally used for command line tools that are installed from npm repository.

• Some common tools we'll see

• babel-cli -- command line interface (CLI) for Babel transpiler from ES6 (and JSX) to ES5

• -- bundler that processes require and import statements to generate single js file

• nodemon

LaToza GMU SWE 432 Fall 2017 29 Nodemon

• What happens when your file changes?

• Could use Control C to kill the process

• And then start it again with node app.js

• But that’s a lot of typing….

• nodemon

• Runs whatever is specified by “main” in package.json

LaToza GMU SWE 432 Fall 2017 30 Using NPM

• Your “project” is a directory which contains a special file, package.json

• Everything that is going to be in your project goes in this directory

• Step 1: Create NPM project npm init

• Step 2: Declare dependencies npm install

• Step 3: Use modules in your app var myPkg = require(“packagename”)

• Do NOT include node_modules in your git repo! Instead, just do npm install

• This will download and install the modules on your machine given the existing config!

https://docs.npmjs.com/index

LaToza GMU SWE 432 Fall 2017 31 NPM Scripts

{ "name": "starter-node-react", "version": "1.1.0", "description": "a starter project structure for react-app", "main": "src/server/index.js", "scripts": { "start": "babel-node src/server/index.js", "build": "webpack --config config/webpack.config.js", "dev": "webpack-dev-server --config config/webpack.config.js -- • Scripts that run at devtool eval --progress --colors --hot --content-base dist/" }, "repository": { specific times. "type": "git", "url": "git+https://github.com/wwsun/starter-node-react.git" }, "author": "Weiwei SUN", "license": "MIT", "bugs": { • npm start --- starts "url": "https://github.com/wwsun/starter-node-react/issues" }, "homepage": "https://github.com/wwsun/starter-node-react#readme", web server "dependencies": { "babel-cli": "^6.4.5", "babel-preset-es2015-node5": "^1.1.2", "co-views": "^2.1.0", "history": "^2.0.0-rc2", "koa": "^1.0.0", "koa-logger": "^1.3.0", "koa-route": "^2.4.2", https://docs.npmjs.com/misc/scripts "koa-static": "^2.0.0", "react": "^0.14.0", "react-dom": "^0.14.0", "react-router": "^2.0.0-rc5", "swig": "^1.4.2" }, "devDependencies": { "babel-core": "^6.1.2", "babel-loader": "^6.0.1", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.1.2", "webpack": "^1.12.2", "webpack-dev-server": "^1.14.1" }, "babel": { LaToza GMU SWE 432 Fall "presets" 2017 : [ "es2015-node5" 32 Demo: Hello World Server

1: Make a directory, myapp Creates a configuration file for your project 2: Enter that directory, type npm init (accept all defaults) 3: Type npm install express Tells NPM that you want to use 4: Create text file app.js: express, and to save that in your project config const express = require('express'); const app = express(); const port = process.env.port || 3000; app.get('/', (req, res) => { res.send('Hello World!'); });

app.listen(port, function () { console.log('Example app listening on port' + port); }); 5: Type node app.js 6: Point your browser to http://localhost:3000 Runs your app

LaToza GMU SWE 432 Fall 2017 33 Demo: Hello World Server

const1: Make express a directory,= require myapp(‘express'); Import the module express

const app = express(); 3: TypeCreate npm install express --save a new instance of express 4: Create text file app.js: const port = process.env.port || 3000; Decide what port we want express to listen on

app.get('/', (req, res) => { var course = { name: 'SWE 432' }; res.send(`Hello ${ course.name }!`); });

Create a callback for express to call when we have a “get” request to “/“. That callback has access to the request (req) and response (res).

app.listen(port, function () { }); Tell our new instance of express to listen on port.

LaToza/Bell GMU SWE 432 Fall 2016 34 In Class Activity

• Build a web server that returns a string with the current date and time.

• https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Reference/Global_Objects/Date

LaToza GMU SWE 432 Fall 2017 35 Readings for next time

• Intro to Node and Express: https:// developer.mozilla.org/en-US/docs/Learn/Server- side/Express_Nodejs/Introduction

• Hosting Node apps on Heroku: https:// devcenter.heroku.com/articles/getting-started-with- nodejs#introduction

LaToza GMU SWE 432 Fall 2017 36