Web Age Webinar Series

Total Page：16

File Type：pdf, Size：1020Kb

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 Binding is Controversial Some consider it to be an anti-pattern Some consider it to be an essential feature The Loop What is it? How does it work? How does it impact performance? Opinions… Backbone.js Angular.js ©WebAgeSolutions.com 7 Browserify and Node.js What is Node.js? What is Browserify? Using CommonJS Modules to build web applications Review Browersify Examples for Backbone.js Angular.js ©WebAgeSolutions.com 8 Summary Examined the problem solved by JavaScript frameworks and libraries such as Backbone.js and Angular.js Explored the similarities and differences of frameworks and libraries focusing on the costs and benefits of them Discussed the idea of two-way data binding underscoring the benefits and limitations of it Reviewed the use of Browserify to build module based web applications ©WebAgeSolutions.com 9 Related Courses WA2425 AngularJS Training: Introduction to AngularJS Programming WA2423 Comprehensive JavaScript for Web 2.0 Development WA2406 Introduction to Responsive Web Development with AngularJS and Bootstrap WA2446 Introduction to Backbone.js ©WebAgeSolutions.com 10 Contact and Resources Eric Greene [email protected] Web Age Solutions US: Greg Wagner @ [email protected] Web Age Solutions Canada: Gary Bilodeau @ gbilodeau@webagesolutions Backbone.js - http://backbonejs.org/ Angular.js - https://angularjs.org/ ©WebAgeSolutions.com 11 .

Copy Link

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]
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">< 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]
Fc12api Fc12api
FC12API FC12API 1 FirstClass 12 API 1.1 Introduction 4 1.2 The index.html (Table of Contents) 7 1.3 API Developer Tool 8 1.4 Drill Down Navigation 31 1.5 Form Creation and Field Updates 36 1.6 Moving Items 41 FirstClass 12 API FC12API - 3 Introduction This section introduces the FirstClass 12 API and the structure of the files included in the API Toolkit. An important step will be to enter the URL and port of your instance of FCWS. What is an API? An application programming interface (API) is a protocol intended to be used as an interface by software components to communicate with each other. The FirstClass Web Services server (FCWS) is a Python implementation of a web server that facilitates access to FirstClass server data and functionality. The FirstClass web client (or any other web-based client) uses HTML 5.0 to communicate with the FirstClass web server. Requests issued to the FirstClass web server are translated into the FirstClass-proprietary protocol FCP and sent to the FirstClass server for processing. The FirstClass server responses are also encapsulated in the FCP protocol, which is then processed by the FirstClass web server and subsequently sent back to the web client. The API is documented and web developers can use this API to create applications that can present secure, authenticated data within their own applications. FC12API - 4 API Toolkit File Structure The API Toolkit is four different applications that will be described further in this document. The Index.html file is the table of contents and each of the different pages share content (either images or CSS) that is stored in the images and Commonjs folders.
[Show full text]