DOCSLIB.ORG

Sources Reskilling Program • Node.Js Is an Open Source Server Environment

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Sources Reskilling Program • Node.Js Is an Open Source Server Environment Sources Reskilling Program • Node.js is an open source server environment. • Node.js is free • Node.js allows you to run JavaScript on the server. • Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) • Node.js is written in C++ • Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. 2 Interne Orange Why node ? • Fast, efficient and highly scalabale • Event driven, non blocking I/O model • Popular in industry • Same language on the front and the back end • The MEAN stack ( Mongo Express Angular NodeJS) • Node.js uses asynchronous programming! 3 Interne Orange Used by many modern companies : • Linkedin • Wal-Mart • Paypal • Uber • Netflix 4 Interne Orange 5 Interne Orange Menu 0) Js reviews ? 1) NodeJS 2) Npm 3) Express 4) Socket IO 6 Interne Orange If you have more blocking operations, the event queue gets even worse: If you have more blocking operations, the vent queue gets even worse: https://www.youtube.com/watch?time_continue=2&v=8aGhZQkoFbQ 7 Interne Orange The Event Loop is a queue of callback functions. When an async function executes, the callback function is pushed into the queue. The JavaScript engine doesn't start continue processing the event loop until the code after an async function has executed. 8 Interne Orange https://www.w3schools.com/nodejs/default.asp http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a- 8ef7-0f7ecbdd56cb https://openclassrooms.com/fr/courses/1056721-des-applications-ultra- rapides-avec-node-js/1057364-les-modules-node-js-et-npm https://thinkmobiles.com/blog/node-js-app-examples/ https://www.tutorialsteacher.com/nodejs/nodejs-tutorials Reference Videos : https://www.youtube.com/watch?v=RLtyhwFtXQA&feature=youtu.be https://www.youtube.com/watch?v=pU9Q6oiQNd0&feature=youtu.be https://www.youtube.com/watch?v=fBNz5xF-Kx4 9 Interne Orange • Know client / server protocol • Confortable with JS / ES6 Prerquities • Have already use a framework https://www.toptal.com/nodejs/why-the-hell-would-i-use-node-js 10 Interne Orange Download Node.js from the official Node.js web site: https://nodejs.org 11 Interne Orange 12 Interne Orange Node --version Test 13 Interne Orange Create a folder Create a file and write : console.log('hello world !'); Then execute using node <your filename> Hello world n°1 14 Interne Orange var http = require('http'); http.createServer( function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World!'); }).listen(8084); Hello world n°2 15 Interne Orange Reminder To stop an application : 16 Interne Orange var http = require('http'); var server = http.createServer( function (req, res) { res.writeHead(200, {"Content-Type": "text/html"}); res.end('<p>Voici un paragraphe <strong>HTML Hello world n°2 </strong> !</p>'); Sending html }); server.listen(8084); 17 Interne Orange var http = require('http'); const PORT = process.env.NODEPORT || 8084 ; // this is a comment var server = http.createServer(function(req, res) { res.writeHead(200, {"Content-Type": "text/html"}); Hello world n°2 res.end('<p>Voici un paragraphe <strong>HTML</strong> !</p>'); Acces variable env }); server.listen(PORT,() => console.log(` Server running on port ${PORT}`)); 18 Interne Orange The fs module provides a lot of very useful functionality to access and interact with the file system. • fs.access(): check if the file exists and Node.js can access it with its permissions • fs.appendFile(): append data to a file. If the file does not exist, it's created • fs.chmod(): change the permissions of a file specified by the filename passed. Related: fs.lchmod(), fs.fchmod() Hello world n°2 • fs.chown(): change the owner and group of a file specified by the filename passed. FS Related: fs.fchown(), fs.lchown() • fs.close(): close a file descriptor (file system) • fs.copyFile(): copies a file • fs.createReadStream(): create a readable file stream • fs.createWriteStream(): create a writable file stream • fs.link(): create a new hard link to a file • fs.mkdir(): create a new folder • fs.mkdtemp(): create a temporary directory 19 Interne Orange • fs.open(): set the file mode • fs.readdir(): read the contents of a directory • fs.readFile(): read the content of a file. Related: fs.read() • fs.readlink(): read the value of a symbolic link • fs.realpath(): resolve relative file path pointers (., ..) to the full path • fs.rename(): rename a file or folder Hello world n°2 • fs.rmdir(): remove a folder FS • fs.stat(): returns the status of the file identified by the filename passed. Related: (file system) fs.fstat(), fs.lstat() • fs.symlink(): create a new symbolic link to a file • fs.truncate(): truncate to the specified length the file identified by the filename passed. Related: fs.ftruncate() • fs.unlink(): remove a file or a symbolic link • fs.unwatchFile(): stop watching for changes on a file • fs.utimes(): change the timestamp of the file identified by the filename passed. Related: fs.futimes() • fs.watchFile(): start watching for changes on a file. Related: fs.watch() • fs.writeFile(): write data to a file. Related: fs.write() 20 Interne Orange const path = require('path'); const fs = require('fs'); // base file name console.log(path.basename( __filename )) //directory name console.log(path.dirname( __filename )) Hello world n°2 FS //file extention (file system) console.log(path.extname( __filename )) //create path object console.log(path.parse(__filename).base) // create a directory fs.mkdir(path.join(__dirname,'test'), {}, err => { if (err) throw err; console.log('Folder created...'); }); 21 Interne Orange var http = require('http'); var fs = require('fs'); http.createServer( function (req, res) { Hello world n°2 FS fs.readFile('demofile1.html', function ( err, data) { (file system) res.writeHead(200, {'Content-Type': 'text/html'}); res.write(data); res.end(); }) 22 Interne Orange }).listen(8080); ); 23 Interne Orange What is a Module in Node.js? Consider modules to be the same as JavaScript libraries. A set of functions you want to include in your application. 24 Interne Orange What do we have here? Importing var http = require('http'); a module Callback http.createServer(function (req, res) { function res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World!'); (trigged when }).listen(8080); ready) 25 Interne Orange Include Your Own Module, Step 1 : make it Create a module that returns the current date and time: exports.myDateTime = function () { return Date(); }; Use the exports keyword to make properties and methods available outside the module file. 26 Interne Orange Include Your Own Module Step 2 : use it Use the module "myfirstmodule" in a Node.js file: var http = require('http'); var dt = require('./myfirstmodule'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/html'}); res.write("The date and time are currently: " + dt.myDateTime()); res.end(); }).listen(8080); 27 Interne Orange Using argument when running If you have one argument without an index name, like this: node app.js flavio you can access it using const args = process.argv.slice(2) args[0] In this case: node app.js name=flavio args[0] is name=flavio, and you need to parse it. 28 Interne Orange 29 Interne Orange As simple as npm install upper-case 30 Interne Orange Node Package Manager Java - Apache maven Php - composer Python - pip Linux - Apt get Ruby - gem 31 Interne Orange NPM Install 3rd party package ( frameorks, libraires, tools, etc ) Packages get stored in the « node_modules » folder All dependencies are listed in a « package.json » file Npm scripts can be created to run certain tacks such as run a server 32 Interne Orange Node Package Manager Consult website :http://npmjs.org 33 Interne Orange 34 Interne Orange npm config set proxy http://mydomain\username:[email protected]:8181/proxy.pac npm config set https-proxy http://mydomain\username:[email protected]:8181/proxy.pac Set proxy Reminder : http://username:[email protected]:8080 35 Interne Orange Check config with npm get config proxy Change proxy https value from https:// to http:// 36 Interne Orange 37 Interne Orange npm config set registry https://artifactory-iva.si.francetelecom.fr/artifactory/api/npm/npmproxy Using IVA repository npm config set registry https://artifactory-iva.si.francetelecom.fr/artifactory/api/npm/npmproxy 38 Interne Orange package.json package.json Equivalent to pom.xml, composer.json … https://docs.npmjs.com/files/package.json 39 Interne Orange package.json package.json there are lots of things going on here: • name sets the application/package name • version indicates the current version • description is a brief description of the app/package • main set the entry point for the application • private if set to true prevents the app/package to be accidentally published on npm • scripts defines a set of node scripts you can run • dependencies sets a list of npm packages installed as dependencies • devDependencies sets a list of npm packages installed as development dependencies • engines sets which versions of Node this package/app works on • browserslist is used to tell which browsers (and their versions) you want to support All those properties are used by either npm or other tools that we can use. 40 Interne Orange package.json package.json The main property In a Node.js application, it ‘s the entry point when the module is called via a require statement main": "app.js", The repository property The repository property of a package.json is an array that defines where the source code for the module lives. "repository": { "type": "git", "url": "https://github.com/bnb/metaverse.git" } 41 Interne Orange package.json package.json The dependencies property where dependencies - the other modules that this module uses - are defined. The dependencies property takes an object that has the name and version at which each dependency should be used. Tying things back to the version property defined earlier, the version that a module needs is defined.
Load more

Recommended publications
  • Lightweight Django USING REST, WEBSOCKETS & BACKBONE
    Lightweight Django USING REST, WEBSOCKETS & BACKBONE Julia Elman & Mark Lavin Lightweight Django LightweightDjango How can you take advantage of the Django framework to integrate complex “A great resource for client-side interactions and real-time features into your web applications? going beyond traditional Through a series of rapid application development projects, this hands-on book shows experienced Django developers how to include REST APIs, apps and learning how WebSockets, and client-side MVC frameworks such as Backbone.js into Django can power the new or existing projects. backend of single-page Learn how to make the most of Django’s decoupled design by choosing web applications.” the components you need to build the lightweight applications you want. —Aymeric Augustin Once you finish this book, you’ll know how to build single-page applications Django core developer, CTO, oscaro.com that respond to interactions in real time. If you’re familiar with Python and JavaScript, you’re good to go. “Such a good idea—I think this will lower the barrier ■ Learn a lightweight approach for starting a new Django project of entry for developers ■ Break reusable applications into smaller services that even more… the more communicate with one another I read, the more excited ■ Create a static, rapid prototyping site as a scaffold for websites and applications I am!” —Barbara Shaurette ■ Build a REST API with django-rest-framework Python Developer, Cox Media Group ■ Learn how to use Django with the Backbone.js MVC framework ■ Create a single-page web application on top of your REST API Lightweight ■ Integrate real-time features with WebSockets and the Tornado networking library ■ Use the book’s code-driven examples in your own projects Julia Elman, a frontend developer and tech education advocate, started learning Django in 2008 while working at World Online.
    [Show full text]
  • Learning Javascript Design Patterns
    Learning JavaScript Design Patterns Addy Osmani Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo Learning JavaScript Design Patterns by Addy Osmani Copyright © 2012 Addy Osmani. All rights reserved. Revision History for the : 2012-05-01 Early release revision 1 See http://oreilly.com/catalog/errata.csp?isbn=9781449331818 for release details. ISBN: 978-1-449-33181-8 1335906805 Table of Contents Preface ..................................................................... ix 1. Introduction ........................................................... 1 2. What is a Pattern? ...................................................... 3 We already use patterns everyday 4 3. 'Pattern'-ity Testing, Proto-Patterns & The Rule Of Three ...................... 7 4. The Structure Of A Design Pattern ......................................... 9 5. Writing Design Patterns ................................................. 11 6. Anti-Patterns ......................................................... 13 7. Categories Of Design Pattern ............................................ 15 Creational Design Patterns 15 Structural Design Patterns 16 Behavioral Design Patterns 16 8. Design Pattern Categorization ........................................... 17 A brief note on classes 17 9. JavaScript Design Patterns .............................................. 21 The Creational Pattern 22 The Constructor Pattern 23 Basic Constructors 23 Constructors With Prototypes 24 The Singleton Pattern 24 The Module Pattern 27 iii Modules 27 Object Literals 27 The Module Pattern
    [Show full text]
  • Web Age Webinar Series
    Welcome! Check that you can "raise your hand" next to your name on the left When we start I'll ask everyone to raise their hand to verify you can hear me To ask a question during the presentation type it in the “Questions” section and raise your hand to help me notice it ©WebAgeSolutions.com 1 CLASH OF THE JAVASCRIPT TITANS: BACKBONE.JS AND ANGULAR.JS A comparison and contrast between Backbone.js and Angular.js ©WebAgeSolutions.com 2 Introduction Eric W. Greene Web Application Developer [email protected] Web Age Solutions Web Age Solutions provides mentoring services and skills training to companies navigating the world of online business. ©WebAgeSolutions.com 3 Overview of Talk The Problem to be Solved Framework or Library? Differences and Benefits of Each The Big Issue: Two-Way Data Binding Browserify and Node.js Conclusion ©WebAgeSolutions.com 4 The Problem to be Solved What problem do JavaScript solutions like Backbone.js and Angular.js solve? Single Page Applications (SPAs) SPAs need the following • Structure to manage UI and application data • Method for accessing network resources such as REST services • Routing System for going from page to page without reloading the web page from the server • Template System for constructing views ©WebAgeSolutions.com 5 Framework or Library? What is the difference between a framework and library? Why is Backbone.js a library? Why is Angular.js a framework? Which are the benefits and costs of using frameworks and libraries? ©WebAgeSolutions.com 6 The Big Issue: Two-Way Data Binding Two-Way Data
    [Show full text]
  • Notes - Javascript - Commonjs Modules
    Notes - JavaScript - CommonJS Modules Dr Nick Hayward A collection of notes &c. on plain JavaScript modules, in particular usage of CommonJS modules and Node.js. Contents Intro General usage Folders as modules package.json index.js require pattern Dynamic require for modules Module design Intro CommonJS is a module library and pattern popularised by Node.js. It is still in regular use for modern apps, both Node.js and client-side based apps. For client-side, we may use build tools, such as WebPack and Browserify, to bundle module dependencies for online usage in a browser-based environment. General usage In CommonJS, every file is a module. Each module has an implicit local scope, and the global scope needs to be accessed explicitly. The module code is wrapped in a function by the loading call, which provides this local scope. CommonJS modules may export a public interface for consumption in apps - dependencies are resolved using require function calls. require function calls are synchronous, returning the exposed interface for the required module. By default, functions in a module will be local to that module. We may then choose the functions, properties &c. to export in the public API for the module. e.g. // CONSTRUCTOR - create basic keyboard object for testing... function Keyboard(keyDetails) { ({ total: this.total, x: this.x, y: this.y, white: this.white, black: this.black } = keyDetails ); } module.exports = Keyboard; The function Keyboard is now available to other files (modules) by requiring the file, const keyboard = require('./basic1'); Local, relative modules may use the standard Unix path to define file access for the module relative to the application, e.g.
    [Show full text]
  • Partitioning Web Applications Between the Server and the Client
    Journal of Web Engineering, Vol. 9, No. 3 (2010) 207–226 c Rinton Press PARTITIONING WEB APPLICATIONS BETWEEN THE SERVER AND THE CLIENT JANNE KUUSKERI Department of Software Systems, Tampere University of Technology, P.O. Box 553 Tampere, 33103, Finland janne.kuuskeri@tut.fi TOMMI MIKKONEN Department of Software Systems, Tampere University of Technology, P.O. Box 553 Tampere, 33103, Finland tommi.mikkonen@tut.fi Received June 21, 2009 Revised January 14, 2010 Web 2.0 and rich Internet application technologies are offering more and more sophis- ticated means for building compelling applications. At the same time the development of applications is becoming increasingly complex. While web applications are commonly relying on server side processing, we aim at implementing a “fat client” and running applications mostly on the client. With this in mind we derive a set of guidelines on how the applications should be partitioned between the server and the client. By following these directives and leaning on the traditional principles of good software development, we address the issues of complexity that have lately emerged in web development. Keywords: Web Application, AJAX, JavaScript, Comet 1 Introduction Web application development is in the middle of a paradigm shift. Users are getting used to web applications with dynamic content and enhanced user experience. User interfaces are no longer updated the whole screen at a time, and servers are able to feed data to them spontaneously. From the users’ point of view, web applications are thus becoming more and more like traditional desktop applications. While the user interfaces of web applications are becoming more usable, the underlying standards and protocols are not evolving at the same pace.
    [Show full text]
  • Arcgis API for Javascript Advanced Topics
    ArcGIS API for JavaScript Advanced Topics Andy Gup & John Gravois ArcGIS API for JavaScript 4.x • Modern architecture • Better control over application life-cycle • Stronger infrastructure for building larger apps Working with Modern JavaScript –2017+ • Stepping beyond plain ol’ JavaScript • ES2015, Node.js, Webpack, TypeScript, etc etc • Transpilers, module loaders, task runners, etc Getting to know modern JavaScript… Almost all modern JavaScript apps use a framework The Good News… A variety of solutions available on github! A partial list… • https://github.com/Esri/angular-esri-map • https://github.com/jwasilgeo/angular2-esri- playground • https://github.com/Esri/esri-system-js • https://github.com/lobsteropteryx/esri- webpack-typescript Two main approaches Dedicated module loader Exclude and Require What are modules? • Different types: AMD, ES6, commonjs, etc • Reusable chunk of JavaScript • Logically encapsulate functionality • Sometimes referred to as JS libraries Example: AMD Modules Module Loaders Dojo uses an AMD module loader Other frameworks use a variety of module loaders: e.g. webpack, SystemJS, RequireJS… Dedicated module loader Example usage: Angular + webpack • Use esriLoader or angular2-esri-loader • Inject ArcGIS JS API as a <script> • Thin wrapper around global require() • Allows for lazy loading ArcGIS modules Dedicated Module Loader Examples • https://github.com/Esri/angular-esri-map • https://github.com/tomwayson/esri-loader Dedicated module loader Advantages: - Sandboxes ArcGIS module dependencies - Only load ArcGIS
    [Show full text]
  • The Past, Present, and Future of Javascript Where We’Ve Been, Where We Are, and What Lies Ahead
    The Past, Present, and Future of JavaScript Where We’ve Been, Where We Are, and What Lies Ahead Dr. Axel Rauschmayer The Past, Present, and Future of JavaScript Axel Rauschmayer Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo The Past, Present, and Future of JavaScript by Axel Rauschmayer Copyright © 2012 Axel Rauschmayer. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or [email protected]. Editor: Mac Slocum Cover Designer: Karen Montgomery Production Editor: Melanie Yarbrough Interior Designer: David Futato Illustrator: Robert Romano Revision History for the First Edition: 2012-07-20 First release See http://oreilly.com/catalog/errata.csp?isbn=9781449339968 for release details. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. The Past, Present, and Future of JavaScript and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information con- tained herein.
    [Show full text]
  • Nur Das, Was Man Braucht
    FRONTEND RollupJS JAVASCRIPT-BUNDLING Nur das, was man braucht Mit Rollup modularen JavaScript-Code ohne Overhead für NPM und Web optimieren. avaScript ist einen weiten Weg gegan- J gen. Aus der von Brendan Eich legen- där „in zehn Tagen“ entwickelten dynami- schen Skriptsprache für triviale User-Inter- aktionen ist eine Basis für Unternehmens- anwendungen mit teilweise über sechs- stelligen Zeilenzahlen geworden, an de- nen große Entwicklerteams über Jahre ar- beiten. Dies ist umso bemerkenswerter, Wasserfall-Effekt beim Laden abhängiger Module (Bild 1) wenn man bedenkt, dass der Sprache lan- ge Zeit ein wichtiges Merkmal fehlte, das sicherlich grundlegend für das Entwickeln großer Applikatio - rerseits müsste man mit wasserfallartigen Effekten kämpfen, nen ist: eine Möglichkeit der Modularisierung. wie sie Bild 1 verdeutlicht. Eine Lösung brachten sogenannte Bundler. Browserify [2] Not macht erfinderisch war einer der ersten und primär dafür gedacht, um NPM-Mo- Spuren davon sieht man heute noch selbst in den moderns- dule ohne Änderung im Browser nutzbar zu machen. Dafür ten Webanwendungen, wenn man einmal einen Blick darauf wurde der Code zusammen mit speziellen browserkompatib- wirft, wie diese ihren Code verpacken, bevor er vom Browser len Versionen wichtiger NPM-Bibliotheken in eine gemein- geladen wird. same Datei, ein sogenanntes Bundle, gepackt. Browserify hat inzwischen viel von seiner ursprünglichen (function(){ Bedeutung zugunsten von Webpack verloren, das heute si- var localVariable = ... // nicht ausserhalb der cher als Standardlösung in diesem Bereich gilt [3]. Die Bin- // umgebenden Funktion sichtbar dung an das von Node eingeführte dynamische CommonJS- window.myExport = ... // über das globale Objekt Format brachte jedoch einen Nachteil, den diese Bundler bis // "window" überall verfügbar heute nicht vollständig überwinden können: Erzeugte Bund- }()); les mussten eine Laufzeitumgebung enthalten, das heißt zu- sätzlichen Code, um Importe und Exporte zur Laufzeit auflö- Dieser Trick einer sogenannten Immediately-Invoked Func- sen zu können.
    [Show full text]
  • Javascript: the First 20 Years
    JavaScript: The First 20 Years ALLEN WIRFS-BROCK, Wirfs-Brock Associates, Inc., USA BRENDAN EICH, Brave Software, Inc., USA Shepherds: Sukyoung Ryu, KAIST, South Korea Richard P. Gabriel: poet, writer, computer scientist How a sidekick scripting language for Java, created at Netscape in a ten-day hack, ships first as a de facto Web standard and eventually becomes the world’s most widely used programming language. This paper tells the story of the creation, design, evolution, and standardization of the JavaScript language over the period of 1995–2015. But the story is not only about the technical details of the language. It is also the story of how people and organizations competed and collaborated to shape the JavaScript language which dominates the Web of 2020. CCS Concepts: • General and reference ! Computing standards, RFCs and guidelines; • Information systems ! World Wide Web; • Social and professional topics ! History of computing; History of programming languages; • Software and its engineering ! General programming languages; Scripting languages. Additional Key Words and Phrases: JavaScript, ECMAScript, Standards, Web browsers, Browser game theory, History of programming languages ACM Reference Format: Allen Wirfs-Brock and Brendan Eich. 2020. JavaScript: The First 20 Years. Proc. ACM Program. Lang. 4, HOPL (June 2020), 190 pages. https://doi.org/10.1145/3386327 1 INTRODUCTION In 2020, the World Wide Web is ubiquitous with over a billion websites accessible from billions of Web-connected devices. Each of those devices runs a Web browser or similar program which is able to process and display pages from those sites. The majority of those pages embed or load source code written in the JavaScript programming language.
    [Show full text]
  • Modular Javascript JC Franco Blake Stearman Console.Log("Hello World");
    Modular JavaScript JC Franco Blake Stearman console.log("hello world"); JC Franco Blake Stearman @arfncode @cthru jcfranco BlakeStearman The Story of an App We’ve all been here. • Start small <!DOCTYPE html> • Add features <html> • Grow complexity • Add developers <head lang="en"> • Trouble <meta charset="UTF-8"> </head> <body> </body> </html> The Story of an App We’ve all been here. • Start small <!DOCTYPE html> • Add features <html> • Grow complexity <head lang="en"> • Add developers <meta charset="UTF-8"> <title>Stopwatch</title> • Trouble </head> <body> <div> <div id="timer">00:00:00:000</div> </div> </body> </html> The Story of an App We’ve all been here. • Start small <!DOCTYPE html> <html> • Add features <head lang="en"> • Grow complexity <meta charset="UTF-8"> • Add developers <title>Stopwatch</title> • Trouble </head> <body> <div> <div id="timer">00:00:00:000</div> <button type="button" id="start-button">Start</button> <button type="button" id="stop-button">Stop</button> </div> </body> </html> The Story of an App We’ve all been here. <!DOCTYPE html> • Start small <html> • Add features <head lang="en"> <meta charset="UTF-8"> • Grow complexity <title>Stopwatch</title> • Add developers <link rel="stylesheet" href="./css/app.css"> </head> • Trouble <body> <div class="nav"> <a class="hoverHighlight" href="./index.html">&lt; Back</a> | Stopwatch script </div> <div class="display"> <div id="timer">00:00:00:000</div> <button type="button" id="start-button">Start</button> <button type="button" id="stop-button">Stop</button> </div> </body>
    [Show full text]
  • SPA Design and Architecture
    Understanding single-page web applications Emmit A. Scott, Jr. FOREWORD BY Burke Holland MANNING SPA Design and Architecture Licensed to Mark Watson <[email protected]> ii Licensed to Mark Watson <[email protected]> SPA Design and Architecture Understanding single-page web applications EMMIT A. SCOTT, JR. MANNING SHELTER ISLAND Licensed to Mark Watson <[email protected]> iv For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 761 Shelter Island, NY 11964 Email: [email protected] ©2016 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without elemental chlorine. Manning Publications Co.
    [Show full text]
  • 3Rd USENIX Conference on Web Application Development (Webapps ’12)
    conference proceedings Proceedings of the 3rd USENIX Conference Application on Web Development 3rd USENIX Conference on Web Application Development (WebApps ’12) Boston, MA, USA June 13, 2012 Boston, MA, USA Sponsored by June 13, 2012 © 2012 by The USENIX Association All Rights Reserved This volume is published as a collective work. Rights to individual papers remain with the author or the author’s employer. Permission is granted for the noncommercial reproduction of the complete work for educational or research purposes. Permission is granted to print, primarily for one person’s exclusive use, a single copy of these Proceedings. USENIX acknowledges all trademarks herein. ISBN 978-931971-94-2 USENIX Association Proceedings of the 3rd USENIX Conference on Web Application Development June 13, 2012 Boston, MA, USA Conference Organizers Program Chair Michael Maximilien, IBM Research—Watson Program Committee Patrick Chanezon, VMware, Inc. Christopher Grier, University of California, Berkeley Robert Johnson, Facebook, Inc. Emre Kıcıman, Microsoft Research Raffi Krikorian, Twitter, Inc. James Mickens, Microsoft Research Subbu Subramanian, Facebook, Inc. Samuel Talmadge King, University of Illinois at Urbana-Champaign The USENIX Association Staff External Reviewers David Huang Ajith Ranabahu WebApps ’12: 3rd USENIX Conference on Web Application Development June 13, 2012 Boston, MA, USA Message from the Program Chair ................................................................ v Wednesday, June 13 11:00–12:30 Papers 1: JavaScript, Social Modeling
    [Show full text]