Mastering Javascript Single Page Application Development

Total Page:16

File Type:pdf, Size:1020Kb

Mastering Javascript Single Page Application Development Mastering JavaScript Single Page Application Development An in-depth guide to exploring the design, architecture, and techniques behind building sophisticated, scalable, and maintainable single-page applications in JavaScript Philip Klauzinski John Moore BIRMINGHAM - MUMBAI Mastering JavaScript Single Page Application Development Copyright © 2016 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: October 2016 Production reference: 1241016 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78588-164-0 www.packtpub.com Credits Authors Copy Editor Philip Klauzinski Safis Editing John Moore Reviewers Project Coordinator Ciro Artigot Ritika Manoj Commissioning Editor Proofreader Wilson D'souza Safis Editing Acquisition Editor Indexer Reshma Raman Rekha Nair Content Development Editor Graphics Divij Kotian Jason Monteiro Technical Editor Production Coordinator Sachit Bedi Aparna Bhagat About the Authors Philip Klauzinski is a senior frontend developer specializing in JavaScript Single Page Application (SPA) development. He has over 20 years of experience in web design and web development and is a leading expert in web application development, client-side JavaScript, and Search Engine Optimization (SEO). Philip has worked as a frontend developer across multiple industries, including consumer e-commerce, business-to-business e-commerce, big data, Web hosting, direct marketing, domain name services (DNS), and manufacturing. I would like to thank my Mom and Dad for always stressing the importance of education in my life, not just institutional education, but more importantly, the pursuance of self- education. My own interest in technology and software from a young age has driven my subsequent, self-taught approach to my career. As a result, I love what I do for a living, and I have been able to shape my professional life around the things in which I am truly interested. I am inherently driven to learn more every day, and I believe that is what has led to my success. Thank you, Mom and Dad! John Moore has been working in web development for 20 years. He is an industry expert in JavaScript and HTML5. He has developed award-winning web applications and worked and consulted for Digital Equipment Corporation, Ernst & Young, Wachovia Bank, and Fidelity Investments. Having focused his early career on frontend web development, he helped usher in responsive web design and Single Page Applications in his roles in development and architecture. Most recently, he led Full Stack development in JavaScript, serving as CTO of a Maine-based startup company. I would like to thank my wife, Dr. Myra Salapare, and daughters, Mila Moore and Sophia Moore, for all of their support. I would also like to thank Andrea Shiflet, Erin Benner, and Lauren Grousd for their tremendous help. About the Reviewer Ciro Artigot is currently working as an IT manager at ECODES, an Spanish foundation that works for the welfare of all people within the limits of our planet. He has developed websites for over 15 years. He is a Full Stack developer and CMS expert and is addicted to Joomla, He has worked for 10 years in open source GNU projects, mainly in LAMP . For the last few years, he has been investigating and working with SPA in MEAN environments. I would like to thank Pampa, Diego,and Hugo, for giving me the time to review this book, and my parents and brothers, for making it possible for me to devote myself to what I like best—develop www.PacktPub.com For support files and downloads related to your book, please visit www.PacktPub.com. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. h t t p s : / / w w w . p a c k t p u b . c o m / m a p t Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career. Why subscribe? Fully searchable across every book published by Packt Copy and paste, print, and bookmark content On demand and accessible via a web browser Table of Contents Preface 1 Chapter 1: Getting Organized with NPM, Bower, and Grunt 7 What is Node Package Manager? 8 Installing Node.js and NPM 8 Configuring your package.json file 9 NPM dependencies 10 Updating your development dependencies 11 Bower 11 Installing Bower 12 Configuring your bower.json file 12 Bower components location and the .bowerrc file 14 Bower dependencies 14 Searching the Bower registry 15 Grunt 16 Installing the Grunt CLI 17 Installing the Grunt task runner 17 Installing Grunt plugins 17 Configuring Grunt 19 Understanding Node.js modules 19 Creating a Gruntfile 20 Defining Grunt task configuration 21 Loading Grunt plugins 22 Running the jshint Grunt task 24 Running the watch Grunt task 25 Defining the default Grunt task 27 Defining custom tasks 27 Summary 29 Chapter 2: Model-View-Whatever 30 The original MVC pattern 30 The Model 31 The View 32 The Controller 33 MVP and MVVM 34 MVP 34 MVVM 35 Summarizing the differences between MVC, MVP, and MVVM 36 VIPER and other variations of MVW 36 VIPER 36 Other variations of MVW 37 AngularJS and MVW 38 A brief history of AngularJS 38 AngularJS components 39 Template 39 Directives 39 Model 40 Scope 40 Expressions 40 Compiler 41 Filter 41 View 41 Data binding 41 Controller 42 Dependency injection 42 Injector 43 Module 43 Service 43 Using the MVW pattern in an SPA 44 Building a simple JavaScript SPA 44 Creating the Model 45 Creating the View 45 Setting up frontend assets 46 Compiling web templates 46 Precompiling web templates 46 Handling server HTTP requests 47 Creating the SPA layout 47 Serving the SPA 48 Overview of a simple JavaScript SPA 49 Summary 50 Chapter 3: SPA Essentials – Creating the Ideal Application Environment 51 The JSON data format 51 Other data formats 53 XML 53 YAML 54 BSON 54 Why does JSON reign supreme? 55 The differences between SQL and NoSQL databases 55 NoSQL data typing 56 Relational data typing 56 ACID transactions 57 Atomicity 57 [ ii ] Consistency 57 Isolation 58 Durability 58 MongoDB and ACID 58 Write-ahead logging with MongoDB 58 When to use SQL versus NoSQL databases 59 Scalability 59 Horizontal scaling 59 Big Data 59 Operational Big Data 60 Analytical Big Data 60 Overall considerations 61 Methods of presenting an SPA container 61 How to define your SPA container 62 Partial page container 62 Full page container 62 How to load your SPA container 63 Loading on user interaction 63 Login page transition 63 Loading based on the DOMContentLoaded event 64 Loading based on the document readystatechange event 65 Loading directly from the document.body 65 Using the script tag async attribute 67 Using the script tag defer attribute 67 Managing layouts 68 Static layouts 68 Dynamic layouts 69 Installing Express 69 Setting up a basic server with Express 70 Basic routing with Express 70 Running a server with Express 71 Loading static assets with Express 71 Dynamic routing with Express 72 Summary 73 Chapter 4: REST is Best – Interacting with the Server Side of Your App 74 Understanding the fundamentals of REST 75 Understanding an architectural style versus a protocol 75 Architectural style 75 Protocol 76 Transport layer protocols 76 Application layer protocols 76 Using HTTP as a transfer protocol for REST 77 The constraints of REST 78 Client-server 78 [ iii ] Stateless 78 Cache 79 Uniform interface 80 Identification of resources 80 Manipulation of resources through representations 81 Self-descriptive messages 81 Hypermedia as the engine of application state 81 Layered system 81 Code-on-demand 82 Benefits of REST 83 Performance 83 Simplicity 84 Separation of concerns 84 Scalability 84 Portability 84 Visibility 85 Reliability 85 RESTful web services 85 Setting up a simple database with MongoDB 86 Installing MongoDB 86 Installing MongoDB on Mac using Homebrew 86 Creating a MongoDB data directory 87 Running MongoDB 87 Creating a collection with MongoDB 87 Installing the Node.js MongoDB driver 88 Writing basic REST API endpoints 89 CRUD with REST 89 Handling request data with Node.js and Express 90 Creating with a POST request 90 Testing the POST request on the frontend 92 Reading with a GET request 93 Testing the GET request on the frontend
Recommended publications
  • THE FUTURE of SCREENS from James Stanton a Little Bit About Me
    THE FUTURE OF SCREENS From james stanton A little bit about me. Hi I am James (Mckenzie) Stanton Thinker / Designer / Engineer / Director / Executive / Artist / Human / Practitioner / Gardner / Builder / and much more... Born in Essex, United Kingdom and survived a few hair raising moments and learnt digital from the ground up. Ok enough of the pleasantries I have been working in the design field since 1999 from the Falmouth School of Art and onwards to the RCA, and many companies. Ok. less about me and more about what I have seen… Today we are going to cover - SCREENS CONCEPTS - DIGITAL TRANSFORMATION - WHY ASSETS LIBRARIES - CODE LIBRARIES - COST EFFECTIVE SOLUTION FOR IMPLEMENTATION I know, I know, I know. That's all good and well, but what does this all mean to a company like mine? We are about to see a massive change in consumer behavior so let's get ready. DIGITAL TRANSFORMATION AS A USP Getting this correct will change your company forever. DIGITAL TRANSFORMATION USP-01 Digital transformation (DT) – the use of technology to radically improve performance or reach of enterprises – is becoming a hot topic for companies across the globe. VERY DIGITAL CHANGING NOT VERY DIGITAL DIGITAL TRANSFORMATION USP-02 Companies face common pressures from customers, employees and competitors to begin or speed up their digital transformation. However they are transforming at different paces with different results. VERY DIGITAL CHANGING NOT VERY DIGITAL DIGITAL TRANSFORMATION USP-03 Successful digital transformation comes not from implementing new technologies but from transforming your organisation to take advantage of the possibilities that new technologies provide.
    [Show full text]
  • Analysis, Design and Development of a Web-Shop Template Using
    Analysis, design and development of a web-shop template using SPHERE.IO e-commerce platform Laura Luiz Escoriza Facultat d’Informàtica de Barcelona (FIB) Universitat Politècnica de Catalunya (UPC) - BarcelonaTech Director: Hajo Eichler Company: commercetools GmbH Advisor: Carles Farré Tost Department: Enginyeria de Serveis i Sistemes d’Informació (ESSI) Master thesis Degree in Informatics Engineering (2003) January 2014 2 3 DADES DEL PROJECTE Títol del projecte: Analysis, design and development of a web-shop template using SPHERE.IO e-commerce platform. Nom de l'estudiant: Laura Luiz Escoriza Titulació: Enginyeria en Informàtica (2003) Crèdits: 37,5 Director: Hajo Eichler Empresa del director: commercetools GmbH Ponent: Carles Farré Tost Departament del ponent: ESSI MEMBRES DEL TRIBUNAL (nom i signatura) 1. President: Antoni Urpí Tubella 2. Vocal: Klaus Gerhard Langohr 3. Secretari: Carles Farré Tost QUALIFICACIÓ Qualificació numèrica: Qualificació descriptiva: Data: 4 5 ABSTRACT In the present thesis a possible next generation of e-commerce solutions with a platform-as-a-service model is presented and analyzed. This generation tries to fill the gap of missing developer-friendly alternatives to build systems with e-commerce components. Current offered solutions are mostly aimed for the comfortable use of designers and other non-technical roles, usually in the shape of out-of-the-box products. These solutions are usually limiting the ability of developers to integrate technologies or build innovative business models, thus sometimes forcing companies to invest in projects that have to be built practically from the start. This document describes the development of the first web-shop built with one of these solutions, SPHERE.IO, an e-commerce platform-as-a-service developed in Berlin by commercetools GmbH.
    [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]
  • The Snap Framework: a Web Toolkit for Haskell
    The Functional Web The Snap Framework A Web Toolkit for Haskell Gregory Collins • Google Switzerland Doug Beardsley • Karamaan Group askell is an advanced functional pro- the same inputs, always produce the same out- gramming language. The product of more put. This property means that you almost always H than 20 years of research, it enables rapid decompose a Haskell program into smaller con- development of robust, concise, and fast soft- stituent parts that you can test independently. ware. Haskell supports integration with other Haskell’s ecosystem also includes many power- languages and has loads of built-in concurrency, ful testing and code-coverage tools. parallelism primitives, and rich libraries. With Haskell also comes out of the box with a set its state-of-the-art testing tools and an active of easy-to-use primitives for parallel and con- community, Haskell makes it easier to produce current programming and for performance pro- flexible, maintainable, high-quality software. filing and tuning. Applications built with GHC The most popular Haskell implementation is enjoy solid multicore performance and can han- the Glasgow Haskell Compiler (GHC), a high- dle hundreds of thousands of concurrent net- performance optimizing native-code compiler. work connections. We’ve been delighted to find Here, we look at Snap, a Web-development that Haskell really shines for Web programming. framework for Haskell. Snap combines many other Web-development environments’ best fea- What’s Snap? tures: writing Web code in an expressive high- Snap offers programmers a simple, expressive level language, a rapid development cycle, fast Web programming interface at roughly the same performance for native code, and easy deploy- level of abstraction as Java servlets.
    [Show full text]
  • Analysing the Use of Outdated Javascript Libraries on the Web
    Updated in September 2017: Require valid versions for library detection throughout the paper. The vulnerability analysis already did so and remains identical. Modifications in Tables I, III and IV; Figures 4 and 7; Sections III-B, IV-B, IV-C, IV-F and IV-H. Additionally, highlight Ember’s security practices in Section V. Thou Shalt Not Depend on Me: Analysing the Use of Outdated JavaScript Libraries on the Web Tobias Lauinger, Abdelberi Chaabane, Sajjad Arshad, William Robertson, Christo Wilson and Engin Kirda Northeastern University {toby, 3abdou, arshad, wkr, cbw, ek}@ccs.neu.edu Abstract—Web developers routinely rely on third-party Java- scripts or HTML into vulnerable websites via a crafted tag. As Script libraries such as jQuery to enhance the functionality of a result, it is of the utmost importance for websites to manage their sites. However, if not properly maintained, such dependen- library dependencies and, in particular, to update vulnerable cies can create attack vectors allowing a site to be compromised. libraries in a timely fashion. In this paper, we conduct the first comprehensive study of To date, security research has addressed a wide range of client-side JavaScript library usage and the resulting security client-side security issues in websites, including validation [30] implications across the Web. Using data from over 133 k websites, we show that 37 % of them include at least one library with a and XSS ([17], [36]), cross-site request forgery [4], and session known vulnerability; the time lag behind the newest release of fixation [34]. However, the use of vulnerable JavaScript libraries a library is measured in the order of years.
    [Show full text]
  • Cross-Platform Mobile Application for the Cothority
    Cross-Platform Mobile Application for the Cothority Vincent Petri & Cedric Maire School of Computer and Communication Sciences Decentralized and Distributed Systems Lab Semester Project January 2018 Responsible Supervisor Prof. Bryan Ford Linus Gasser EPFL / DeDiS EPFL / DeDiS 2 Acknowledgements We would like to express our special thanks to Linus Gasser who gave us the opportunity to do this very interesting project related to the collec- tive authority (Cothority) framework developed by the DeDiS laboratory at EPFL. We would like to thank him for the valuable help he gave us whenever we needed and for the knowledge he provided to us throughout the semester. Secondly, we would also like to thank our parents and friends who helped us through the hard times of finalising the project within the limited time frame. 3 1 Abstract The Cothority2 framework has been developed and maintained by the DeDiS laboratory at EPFL. This project provides a framework for develop- ing, analysing, and deploying decentralised and distributed cryptographic protocols. A set of servers that runs these protocols and communicates among each other is referred to as a collective authority, or cothority, and the individual servers are called cothority servers or conodes. A cothority that executes decentralised protocols could be used for collective signing, threshold signing, or the generation of public-randomness, to name only a few options. The highest level of abstraction can be created by protocols like the collective signature (CoSi) protocol, the random numbers (Rand- Hound) protocol, or the communication (Messaging) protocol used by the conodes to exchange data. Then come the services, which rely on these pro- tocols.
    [Show full text]
  • The Effect of Ajax on Performance and Usability in Web Environments
    The effect of Ajax on performance and usability in web environments Y.D.C.N. op ’t Roodt, BICT Date of acceptance: August 31st, 2006 One Year Master Course Software Engineering Thesis Supervisor: Dr. Jurgen Vinju Internship Supervisor: Ir. Koen Kam Company or Institute: Hyves (Startphone Limited) Availability: public domain Universiteit van Amsterdam, Hogeschool van Amsterdam, Vrije Universiteit 2 This page intentionally left blank 3 Table of contents 1 Foreword ................................................................................................... 6 2 Motivation ................................................................................................. 7 2.1 Tasks and sources................................................................................ 7 2.2 Research question ............................................................................... 9 3 Research method ..................................................................................... 10 3.1 On implementation........................................................................... 11 4 Background and context of Ajax .............................................................. 12 4.1 Background....................................................................................... 12 4.2 Rich Internet Applications ................................................................ 12 4.3 JavaScript.......................................................................................... 13 4.4 The XMLHttpRequest object..........................................................
    [Show full text]
  • Web Development Frameworks Ruby on Rails VS Google Web Toolkit
    Bachelor thesis Web Development Frameworks Ruby on Rails VS Google Web Toolkit Author: Carlos Gallardo Adrián Extremera Supervisor: Welf Löwe Semester: Spring 2011 Course code: 2DV00E SE-391 82 Kalmar / SE-351 95 Växjö Tel +46 (0)772-28 80 00 [email protected] Lnu.se/dfm Abstract Web programming is getting more and more important every day and as a consequence, many new tools are created in order to help developers design and construct applications quicker, easier and better structured. Apart from different IDEs and Technologies, nowadays Web Frameworks are gaining popularity amongst users since they offer a large range of methods, classes, etc. that allow programmers to create and maintain solid Web systems. This research focuses on two different Web Frameworks: Ruby on Rails and Google Web Toolkit and within this document we will examine some of the most important differences between them during a Web development. Keywords web frameworks, Ruby, Rails, Model-View-Controller, web programming, Java, Google Web Toolkit, web development, code lines i List of Figures Figure 2.1. mraible - History of Web Frameworks....................................................4 Figure 2.2. Java BluePrints - MVC Pattern..............................................................6 Figure 2.3. Libros Web - MVC Architecture.............................................................7 Figure 2.4. Ruby on Rails - Logo.............................................................................8 Figure 2.5. Windaroo Consulting Inc - Ruby on Rails Structure.............................10
    [Show full text]
  • FINAL Report-Capstone Project BENOMAR Sarah
    FINAL Report-Capstone Project BENOMAR Sarah Supervised by: Doctor Violetta CAVALLI-SFORZA Approval: SPRING 2016 SCHOOL OF SCIENCE & ENGINEERING – AL AKHAWAYN UNIVE R S I T Y Table of Contents Acknowledgement ................................................................................................................ 3 Abstract ................................................................................................................................ 4 I. Introduction ................................................................................................................... 5 II. Feasibility Study ............................................................................................................ 6 III. Methodology .................................................................................................................. 8 1. Problem Specification ................................................................................................. 8 2. Requirement Specification .......................................................................................... 8 2.1 Functional Requirements ...................................................................................................... 8 2.2 Non-Functional Requirements ...................................................................................... 11 3. Software Selection Criteria ....................................................................................... 12 4. Choice Validation ....................................................................................................
    [Show full text]
  • CS 683 Emerging Technologies Fall Semester, 2006 Doc 23 Rails 7 AJAX Nov 16, 2006
    CS 683 Emerging Technologies Fall Semester, 2006 Doc 23 Rails 7 AJAX Nov 16, 2006 Copyright ©, All rights reserved. 2006 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http:// www.opencontent.org/opl.shtml) license defines the copyright on this document. References script.aculo.us, Common Ajax Javascript library, http://script.aculo.us/ Surveying open-source AJAX toolkits, Peter Wayner, Inforworld, July 31, 2006, http://www.infoworld.com/article/ 06/07/31/31FEajax_1.html Proprietary AJAX toolkits: The other side of the coin, Peter Wayner, Inforworld, July 31, 2006, http://www.infoworld.com/ infoworld/article/06/07/31/31FEajaxsb_1.html Ajax/DHTML Library Scorecard:How Cross Platform Are They? Musings from Mars ,March 4th, 2006, http:// www.musingsfrommars.org/2006/03/ajax-dhtml-library-scorecard.html Wikipedia, http://en.wikipedia.org/wiki/Main_Page Agile Web Development with Rails 2nd Ed Bl.16 October 25, Thomas & Hanson, The Pragmatic Bookshelf, PDF Rails API, http://api.rubyonrails.org/ Some Ajax Reading Why Ajax Sucks (Most of the Time) Jacob Nielson http://www.usabilityviews.com/ajaxsucks.html Ajax SWik http://swik.net/Ajax Ajax Mistakes How to use XMLHttpRequest Places to use Ajax 2 Web Browsers suck for developing applications HTML is very limited as UI Delay in response from server 3 Reducing Suckiness CSS Javascript XMLHttpRequest 4 Cascading Style Sheets - CSS stylesheet language that describes layout of HTML & XML Provides HTML better control over layout body { background-color: #fff;
    [Show full text]
  • Templates V07 • This Web Site Has 7 Pages
    Web Development Templates V07 • This web site has 7 pages. • Each page has: Templates • Head Section Why? • Body Section • Each Body Section has • Header • Footer • —> • 7 Identical Head Section • 7 Identical Header’s • 7 Identical Footer’s • —> 21 Repeated Sections • Its got its own Wikipedia Page! https://en.wikipedia.org/wiki/Don%27t_repeat_yourself DRY vs WET Don’t Repeat Yourself vs Write Everything Twice OR We Enjoy Typing Single Header + DRY Footer Template • Incorporate the SAME single header/footer into ALL pages • Any changes - made just once in the single header/footer Web Template System A web template system uses a template processor to combine web templates to form finished web pages, possibly using some data source to customize the pages or present a large amount of content on similar-looking pages. It is a web publishing tool present in content management systems, web application frameworks, and HTML editors. https://en.wikipedia.org/wiki/Web_template_system Harp.js • Harp.js is our Template Engine • It ‘serves’ the site • If Request is for ordinary page the page is ‘rendered’ without modification • If Request is for a page that is composed of templates, harp assembles the page and renders the complete page to the browser Lab09 Lab09 • reusable templates included in various pages • reusable layout • reworked pages based WET Version on layout • simplified home page DRY Version • Overall - more files • But less content! Step 1 • Visit: • http://localhost:9000/ • WET (non templated) version of site Step 02 - Header & Footer templates • New folder in project called ‘includes’ • … containing reusable templates ‘_header.ejs’ & ‘_footer.ejs’ • These are exactly the same content as in all our other pages Step 02: index.html • Replace the <header> and <footer> elements with : • These will be ‘included’ in the page when it is rendered via harp.
    [Show full text]
  • Managing Data Visualization Pipeline with Backbone.Js and D3.Js Improving Overall Software Efficiency Using Automated Build Pipeline with Gulp
    Aalto University School of Science Master's Programme in ICT Innovation Taha Kachwala Managing Data Visualization Pipeline with Backbone.js and D3.js Improving overall software efficiency using Automated Build Pipeline with Gulp Master's Thesis Espoo, 10.10.2016 Supervisor: Prof. Petri Vuorimaa Instructor: Pertti Lounamaa Aalto University School of Science ABSTRACT OF Master's Programme in ICT Innovation MASTER'S THESIS Author: Taha Kachwala Title: Managing Data Visualization Pipeline with Backbone.js and D3.js. Improving overall software efficiency using Automated Build Pipeline with Gulp Date: 10.10.2016 Pages: 87 Professorship: Digital Media Technology Code: T-111 Supervisor: Prof. Petri Vuorimaa Instructor: Petri Lounamaa Ph.D. (Economic Systems) This thesis studies how a Model-View-Controller (MV*) framework can be integrated into a Data Visualization Pipeline. Specifically, this thesis aims to cover the challenges related in integrating an MV* framework like Backbone.js with D3.js, which is a popular JavaScript based visualization library. Additionally, it also evaluates another sub-topic regarding task runners, which are tools claiming to automate manual tasks as well as streamlining the build process. Data Visualization has become an important aspect for many web applications. Developers need to employ sophisticated mechanisms to provide interactive visualizations. This requires separation of concerns within the visualization pipeline which is achieved with the combination of Backbone.js and D3.js. Evaluation of this methodology indicates that such a combination enables the application to be more versatile and robust while also improving performance. In recent years, client-side web applications have become increasingly complex. A typical web application on average requires between 10-60 external open-source JavaScript libraries.
    [Show full text]