web development toolstlatoza/teaching/swe432f17/lecture 4 - web... · latoza gmu swe 432 fall 2017...
TRANSCRIPT
Web Development Tools
SWE 432, Fall 2017Design and Implementation of Software for the Web
LaToza GMU SWE 432 Fall 2017
Today
• HW1 due next Tuesday
• Material from last time: properties review, cascades
• Web Development Tools
• Version control with Git
• Running JavaScript
2
LaToza GMU SWE 432 Fall 2017
JSON vs. objects
• All will create an object.
• obj1 or obj2 preferred syntax. Should try to be consistent.
• Only obj4 is valid JSON
3
var obj1 = { prop: "value" }; var obj2 = { prop: 'value' }; var obj3 = { 'prop': "value" }; var obj4 = { "prop": "value" };
var obj5 = { "prop": "'value'" }; var obj6 = { "prop": "\"value\"" };
• Can use different quote types for nesting. Or use \ to escape.
LaToza/Bell GMU SWE 432 Fall 2016
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()
.html(“Welcome")
.fadeIn();
4
Version Control
We’ve always had some kind of version control
Carbon copies?
LaToza GMU SWE 432 Fall 2017
Git• One of the latest generation of Version Control
Systems (VCS)
• Came out of the Linux development community
• Fast
• Supports non-linear development
• Fully distributed (no need for “central” server)
• Able to handle large projects effectively
7
Linear vs Nonlinear Development
Distribution ModelCentralized Model
Examples: CVS, Subversion, Perforce
Distribution ModelCentralized Model Distributed Model
Examples: CVS, Subversion, Perforce Examples:
Git, MercurialNo central point of failure
No latency when doing most operations
LaToza GMU SWE 432 Fall 2017
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
11
LaToza GMU SWE 432 Fall 2017
Local repository
Git’s local repository
Index
Git’s local record of changes
Git, High level
12
add commit
commit-a
Workspace
E.g. The files you see
Remote repository
E.g. GitHub
push
pull
fetchcheckout
diff
Github
Person 1 Person 2
Typical Use Case
Create Project & Repo
Edit/commit
Edit/commit
Edit/commitEdit/commit
Push to Github Clone from GithubEdit/commit/push
Pull/push
Pull/push
Edit/commit
Git Resourceshttps://try.github.io/levels/1/challenges/1
Also: Git Cheat Sheet https://services.github.com/kit/downloads/github-git-cheat-
sheet.pdf
Download and install git: https://git-scm.com/downloads
IDEs
LaToza GMU SWE 432 Fall 2017
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/
16
Executing JavaScript
LaToza GMU SWE 432 Fall 2017
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
18
LaToza GMU SWE 432 Fall 2017
Hello world
var course = { name: 'SWE 432’ }; console.log(`Hello ${ course.name }!`);
19
LaToza GMU SWE 432 Fall 2017
Demo: Pastebin
20
• Careful: be sure to use correct quote character!
LaToza GMU SWE 432 Fall 2017
Demo: Script Tag Inline
<!DOCTYPEhtml><htmllang="en"><head><script>...</script></head></html>
21
hello.html
LaToza GMU SWE 432 Fall 2017
Demo: Script Tag Include
22
<!DOCTYPEhtml><htmllang="en"><head><scriptsrc="....js"></script></head></html>
hello.html
LaToza GMU SWE 432 Fall 2017
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)
23
LaToza GMU SWE 432 Fall 2017
Demo: Node.js
24
Node Package Manager
LaToza GMU SWE 432 Fall 2017
Working with libraries<script src="https://fb.me/react-15.0.0.js"></script> <script src=“https://fb.me/react-dom-15.0.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
• 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!”
26
LaToza GMU SWE 432 Fall 2017
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
27
Your app Assumes dependencies magically exist
Dependencies Configuration Declares what modules you need
Package Manager Provides the modules to your app
Mod
ules
that
mag
ical
ly a
ppea
r
LaToza GMU SWE 432 Fall 2017
NPM: Not an acronym, but the Node Package Manager
• Bring order to our modules and dependencies
• Declarative approach:
• “My app is called helloworld”
• “It is version 1”
• You can run it by saying “node index.js”
• “I need express, the most recent version is fine”
• Config is stored in json - specifically package.json
28
{ "name": "helloworld", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "express": "^4.14.0" } }
Generated by npm commands:
LaToza GMU SWE 432 Fall 2017
Installing tools with NPM
• 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
• webpack -- bundler that processes require and import statements to generate single js file
• nodemon
29
npm install <module> -g
LaToza GMU SWE 432 Fall 2017
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
30
LaToza GMU SWE 432 Fall 2017
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 <packagename>
• 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!
31
https://docs.npmjs.com/index
LaToza GMU SWE 432 Fall 2017
NPM Scripts
• Scripts that run at specific times.
• npm start --- starts web server
32
{ "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 --devtool eval --progress --colors --hot --content-base dist/" }, "repository": { "type": "git", "url": "git+https://github.com/wwsun/starter-node-react.git" }, "author": "Weiwei SUN", "license": "MIT", "bugs": { "url": "https://github.com/wwsun/starter-node-react/issues" }, "homepage": "https://github.com/wwsun/starter-node-react#readme", "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", "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": { "presets": [ "es2015-node5"
https://docs.npmjs.com/misc/scripts
LaToza GMU SWE 432 Fall 2017
Demo: Hello World Server
33
1: Make a directory, myapp
2: Enter that directory, type npminit (accept all defaults)
3: Type npminstallexpress
4: Create text file app.js:
5: Type nodeapp.js6: Point your browser to http://localhost:3000
Creates a configuration file for your project
Tells NPM that you want to use express, and to save that in your
project config
Runs your app
constexpress=require('express');constapp=express();constport=process.env.port||3000;app.get('/',(req,res)=>{res.send('HelloWorld!');});
app.listen(port,function(){console.log('Exampleapplisteningonport'+port);});
LaToza/Bell GMU SWE 432 Fall 2016
Demo: Hello World Server
34
1: Make a directory, myapp
3: Type npminstallexpress--save
4: Create text file app.js:
constexpress=require(‘express');
constapp=express();
constport=process.env.port||3000;
app.get('/', (req, res) => { var course = { name: 'SWE 432' }; res.send(`Hello ${ course.name }!`); });
app.listen(port,function(){});
Import the module express
Create a new instance of express
Decide what port we want express to listen on
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).
Tell our new instance of express to listen on port.
LaToza GMU SWE 432 Fall 2017
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
35
LaToza GMU SWE 432 Fall 2017
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
36