Slide 1

Slide 1 text

Web Development Overview {Startup} Programming by Alexey Zagalsky 2016 edition

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

https://www.thoughtworks.com/insights/blog/implications-tech-stack-complexity-executives

Slide 4

Slide 4 text

http://svsg.co/how-to-choose-your-tech-stack/

Slide 5

Slide 5 text

Web browser, Native (Android, iOS) ... Client Side

Slide 6

Slide 6 text

Networking HTTP Rendering HTML CSS Business Logic VM (Java, Silverlight, Flash) Javascript Roles of the Browser

Slide 7

Slide 7 text

HyperText Markup Language (HTML) HTML is the standard markup language used to create web pages. HTML elements: Head: title, base, link, style, meta, script Body: titles, paragraphs, text style, lists, tables, images, links, forms Every HTML element can be assigned with an id attribute to allow manipulation with JavaScript or CSS. Hello World!

Hi

Minimal hello world page.

Slide 8

Slide 8 text

Cascading Style Sheets (CSS) Semantic Tags vs. Design Tags

,

vs. , No model-view separation CSS Zen Garden (http://www.csszengarden.com/) Preprocessors: SCSS vs LESS http://www.labnol.org/internet/learn-css/29126/

Slide 9

Slide 9 text

Extensible Markup Language (XML) Labeled ordered tree Many available tools to: generate, parse, transform, send Mainly used for: Configuration Declarative (meta) programming Platform independent data exchange (RSS feeds)

Slide 10

Slide 10 text

JavaScript “The programming language of the Web” Prototype-based scripting language with dynamic typing Fully fledged programming language: variables, arrays, objects, methods, conditional statements, loops, and events. Simple and forgiving syntax: Type declaration optional Lambda notation JSON Compatibility issues between different browsers (JavaScript, JScript, ECMAScript) var x = 3; var y = 47; alert( " 3 x 47 = " + (x*y) );

Hello

Slide 11

Slide 11 text

DOM Document Object Model JavaScript meets the browser Data structure and API that enables programmatic manipulation of HTML pages

Slide 12

Slide 12 text

DOM Example function getValue(){ var x = document.getElementById("myHeader"); alert(x.innerHTML); }

This is a header

Click on the header to alert its value

Slide 13

Slide 13 text

Better User Experience - AJAX Asynchronous JavaScript + XML XMLHttpRequest Not standardized. Many frameworks available

Slide 14

Slide 14 text

function sendRequest() { var req = new XMLHttpRequest(); req.open("GET", "http://www.google.ca/search?hl=en&q=victoria", true); req.onreadystatechange = function() { if (req.readyState == 4) { if (req.status == 200) { printResultCount( req.responseText ); } } }; req.send(); } function printResultCount(data) { var str = data.match(/of about <b>(.+?)<\/b> for <b>(.+?)<\/b>/i); var obj = document.getElementById("output"); obj.innerHTML = str[1]+" results found"; }

This is a header

Click on the header to use ajax

Slide 15

Slide 15 text

http://blog.octo.com/en/new-web-application-architectures-and-impacts-for-enterprises-1/

Slide 16

Slide 16 text

Advanced Technologies ● Bootstrap ● CoffeScript, TypeScript ● Angular.js ● Node.js ● Ruby on Rails ● Yeoman ● React ● ... Some tutorials can be found at http://build-podcast.com/

Slide 17

Slide 17 text

Web server, Databases, Authentication ... Server Side Technologies

Slide 18

Slide 18 text

Web Containers / Web Frameworks Roles of web container: Networking, Thread management, Servlet management, HTTP protocol management

Slide 19

Slide 19 text

Example var app = express(); app.use(bodyParser.urlencoded({ extended: false })) app.engine('html', require('ejs').renderFile); app.set('view engine', 'html'); app.get('/', function (req,res){ Shout.find(function(err, shouts) { if (err) return console.error(err); res.render('index.html', { shouts : shouts }); }); }); app.post('/post', function (req, res) { var name = req.body.name; var message = req.body.message; var shout = new Shout({ name: name, message: message }); shout.save(function(err) { if (err) return console.error(err); }); res.redirect(301, '/'); }); Full code example at: github.com/alexeyza/startup-programming/blob/master/resources/tutorial s

Slide 20

Slide 20 text

HTTP GET Request GET /bin/login?user=Peter+Lee&pw=123456&action=login HTTP/1.1 Accept: image/gif, image/jpeg, */* Referer: http://127.0.0.1:8000/login.html Accept-Language: en-us Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Host: 127.0.0.1:8000 Connection: Keep-Alive

Slide 21

Slide 21 text

HTTP POST Request POST /bin/login HTTP/1.1 Host: 127.0.0.1:8000 Accept: image/gif, image/jpeg, */* Referer: http://127.0.0.1:8000/login.html Accept-Language: en-us Content-Type: application/x-www-form-urlencoded Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Content-Length: 37 Connection: Keep-Alive Cache-Control: no-cache User=Peter+Lee&pw=123456&action=login

Slide 22

Slide 22 text

GET vs. POST The HTTP GET method is used when: The processing of the request is idempotent The amount of form data is small You want to allow the request to be bookmarked The HTTP POST method is used when: The processing of the request changes the state of the server, such as data in a database The amount of form data is large The contents of the data should not be visible in the URL (e.g. passwords)

Slide 23

Slide 23 text

Forms name: message:

Slide 24

Slide 24 text

Session Management HTTP is a stateless protocol, however, a web container provides the mechanisms to maintain states and sessions (e.g. virtual shopping cart). Cookies ● The server attaches a cookie, file containing name=value pairs, with each response. ● With every request the client will attach previous cookies. ● In practice, the cookie holds only the unique user identifier - the session data itself is stored on the server. URL rewriting ● Links will be modified to include the additional variables (e.g. the unique identifier).

Slide 25

Slide 25 text

Web Template System A web template system is composed of: ● A template engine (EJS, DJango) ● Content resource (DB) ● Template resource (JSP, PHP) Benefits: ● Separation of concerns (Model/View) ● Mass production of content ● Flexible presentation ● Reusability ● Style standardization

Slide 26

Slide 26 text

Typical LAMP hosted webapp Serverless webapp

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Wait, so what should we use? Frontend HTML, CSS, JavaScript, jQuery... Backend Java, Python, Node.js, Go, Ruby on Rails... Hosting Google App Engine, Heroku, AWS... IDE / Text Editor Eclipse, Webstorm, SublimeText...

Slide 29

Slide 29 text

Questions? https://github.com/alexeyza/startup-programming/tree/master/resources/tutorials