Table of Contents for
Web Design Blueprints

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Web Design Blueprints by Benjamin LaGrone Published by Packt Publishing, 2016
  1. Cover
  2. Table of Contents
  3. Web Design Blueprints
  4. Web Design Blueprints
  5. Credits
  6. About the Author
  7. About the Reviewer
  8. www.PacktPub.com
  9. Preface
  10. What you need for this book
  11. Who this book is for
  12. Conventions
  13. Reader feedback
  14. Customer support
  15. 1. Responsive Web Design
  16. Getting familiar with the basics
  17. Using media queries for responsive design
  18. Working with responsive media
  19. Building responsive layouts
  20. Summary
  21. 2. Flat UI
  22. Flat UI color
  23. Creating a flat UI layout
  24. Summary
  25. 3. Parallax Scrolling
  26. Color classes
  27. Using SVG font icons
  28. Getting the fonts
  29. That's no moon!
  30. OMG, it's full of stars!
  31. Clouds, birds, and airplanes
  32. The rocket
  33. Terra firma
  34. Next up, the CSS
  35. Styling the objects with CSS
  36. Styling the ground objects
  37. Writing the JavaScript effects
  38. Setting the row height
  39. Spreading the objects
  40. Spreading the clouds
  41. Loading the page functions
  42. Smoothening the scroll
  43. Updating elements on the scroller
  44. Collecting the moving elements
  45. Creating functions for the element types
  46. Setting the left positions
  47. Creating the rocket's movement function
  48. Finally, moving the earth
  49. Summary
  50. 4. Single Page Applications
  51. Getting to work
  52. Getting the old files
  53. Object and function conventions
  54. Creating utility functions
  55. Working with the home structure
  56. Setting up other sections
  57. Performing housekeeping
  58. Creating a callBack function for the API
  59. Summary
  60. 5. The Death Star Chapter
  61. Dropping in the parallax game
  62. Loading elements from JSON
  63. What can be done in the shared levels service
  64. Editing the home JavaScript
  65. Creating the other pages – credits and leaderboard
  66. Creating the second level
  67. Summary
  68. Index

Chapter 4. Single Page Applications

Welcome back! This section is about SPA, Single Page Applications, not a place you go to get your face rubbed. The SPA, if you don't already know, is a web application that loads new pages and content asynchronously. This means that the whole page loads at first, and then uses JavaScript to insert new content inside the page into a defined element.

For this project, let's take an overview of the task at hand. Developing it is not so straightforward; there are a number of steps that we would have to go through before it works. So our development should have some specific milestones of understanding at each step. We will take a UI template we have already built and build it into a Single Page Application framework. First, we will get the template, then break it into the main template and a component loaded through an AJAX function. Then we will break the homepage content into sections that are loaded in a loop from an array containing route information, a routing table. Finally, we will create pages that we can navigate through using the routing table to load the content from links. We will also learn how to use the hash for Single Page Application navigation.

What is an SPA?

Single Page Application is a new and very useful web trend. Using them allows you to build fast and efficient applications and reusable components that are great for mobile and responsive web applications.

Part of the popularity of the Single Page Application is due to its efficiency in front-loading all of the used libraries on the initial load into the DOM and then loading new content as needed. This way, when you want to load a new page, you do not require your user to pull down your CSS or JavaScript file over and over for any new page. You can instead just load the new content, templates, scripts, or data, as you need it. This is a very useful way to build web applications and it makes sense that people want to build them.

The SPA's relevance

The popularity of the Single Page Application has driven the rise of numerous helper libraries for making it. Frameworks are providing routing, loading, and require features that help include scripts, templates, and content, and even provide the framework structure to use to build your app.

You may ask what is the advantage of using a Single Page Application for your project. The advantages are tremendous, and the result is that your SPA web application will load quickly and you do not need to create a whole new file for every link you click, or every post back. The web page and development become streamlined.