Understanding single-page web applications Emmit A Scott, Jr FOREWORD BY Burke Holland MANNING CuuDuongThanCong.com https://fb.com/tailieudientucntt SPA Design and Architecture CuuDuongThanCong.com Licensed to Mark Watson https://fb.com/tailieudientucntt ii CuuDuongThanCong.com Licensed to Mark Watson https://fb.com/tailieudientucntt SPA Design and Architecture Understanding single-page web applications EMMIT A SCOTT, JR MANNING SHELTER ISLAND CuuDuongThanCong.com Licensed to Mark Watson https://fb.com/tailieudientucntt 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: orders@manning.com ©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 20 Baldwin Road PO Box 761 Shelter Island, NY 11964 Development editor: Dan Maharry Technical development editor: Joel Kotarski Technical proofreaders: Andrew Gibson Jean-Franỗois Morin Copyeditor: Sharon Wilkey Proofreader: Linda Recktenwald Typesetter: Marija Tudor Cover designer: Marija Tudor ISBN: 9781617292439 Printed in the United States of America 10 – EBM – 20 19 18 17 16 15 CuuDuongThanCong.com Licensed to Mark Watson https://fb.com/tailieudientucntt To my three beautiful children, Ana Carolina, David, and Sofía Thanks for all the smiles, hugs, and unconditional love You are forever in my heart CuuDuongThanCong.com Licensed to Mark Watson https://fb.com/tailieudientucntt vi CuuDuongThanCong.com Licensed to Mark Watson https://fb.com/tailieudientucntt brief contents PART THE BASICS 1 ■ ■ ■ What is a single-page application? The role of MV* frameworks 22 Modular JavaScript 52 PART CORE CONCEPTS 83 ■ ■ ■ ■ ■ ■ appendix A appendix B appendix C appendix D Navigating the single page 85 View composition and layout 106 Inter-module interaction 129 Communicating with the server 156 Unit testing 186 Client-side task automation 209 Employee directory example walk-through 229 Review of the XMLHttpRequest API 259 Chapter server-side setup and summary 266 Installing Node.js and Gulp.js 277 vii CuuDuongThanCong.com Licensed to Mark Watson https://fb.com/tailieudientucntt viii BRIEF CONTENTS CuuDuongThanCong.com Licensed to Mark Watson https://fb.com/tailieudientucntt contents foreword xv preface xvii acknowledgments xviii about this book xix about the cover illustration PART 1 xxiii THE BASICS What is a single-page application? 1.1 SPA in a nutshell No browser refreshes Server transactions 1.2 ■ Presentation logic in the client A closer look An SPA starts with a shell From traditional pages to views The birth of a view 10 View swapping for zero reload navigation 11 Fluidity through dynamic updates 12 ■ ■ ■ ■ 1.3 Benefits of SPAs over traditional web applications 1.4 Rethinking what you already know 14 1.5 Ingredients of a well-designed SPA 12 15 Organizing your project 15 Creating a maintainable, loosely coupled UI 17 Using JavaScript modules 18 Performing SPA navigation 19 Creating view composition and layout 19 Enabling module communication 20 ■ ■ ■ ■ ■ ix CuuDuongThanCong.com Licensed to Mark Watson https://fb.com/tailieudientucntt ... reduced as well www.webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-tobusiness-metrics-at-walmart-com CuuDuongThanCong.com Licensed to Mark Watson ... application become a second-tier folder Image files |-| | | | | | | | | | |-| - |-| - |-| -| What is a single-page application? Sample directory structure (by feature) app Top-level folder for | foo... end up http://blog.angularjs.org/2014/02/an-angularjs-style-guide-and-best.html or http://angularjs.blogspot.co uk/2014/02/an-angularjs-style-guide-and-best.html CuuDuongThanCong.com Licensed to