Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
images
README.md
browser-template-pattern-info_notes.pdf

README.md

General Assembly Logo

Browser Template Pattern Info

Description

Browser Template allows us to use a specific pattern for separating our HTML from our HTTP Request Javascript, from our Event Handler Javascript, from our DOM update Javascript. This files is intended to help you understand how the different parts of this template interact and work together.

Characteristics

  • this pattern was designed by General Assembly. Other people / organizations may use a different pattern
  • the pattern is how the files are organized, how they require each other, and how we hook up the functions within the files
  • by following this pattern, we avoid giant code files and write short, modular code
  • separating functionality across files allows us to "separate concerns" within our program logic
  • there is more detailed info on Browser Template here

Required Knowledge

  • how to use module.export and require to export values/functions from files, and import modules, respectively
  • standard jQuery DOM interactions / manipulations
  • HTTP requests
  • HTTP requests specifically using jQuery's ajax method, and how to handle success and failure callbacks from this function

Information Flow Between Files

Details About Files

We are only concerned with files within assets/scripts/. All files below are listed starting in assets/scripts/.

  • index.html
    • WHERE DOM ELEMENTS LIVE
    • forms with special name attributes recognized by getFormFields module, allowing us to get nicely constructed data objects from our forms
    • for example a form in index.html like this, with a input value of 5:
    • <form action="#" id="book-request">
        <input type="text" name="book[id]" id="book-id">
        <input type="submit">
      </form>
    • will allow getFormFields to get us data of the format:
    • {
          book {
              id: 5
          }
      }
  • app.js
    • WHERE EVENT HANDLERS ARE BOUND TO FORM ELEMENTS

    • "entry point" from which all other javascript files are loaded

    • for example:

    • // On document ready
      $(() => {
        $('#book-request').on('submit', bookEvents.onGetBooks);
      });
  • <resource name> folder:
    • events.js
      • WHERE EVENT HANDLER FUNCTIONS LIVE

      • event handlers run jQuery ajax http request functions ⇐ api.js

      • event handlers also bind callbacks to the http request function succeeding or failing ⇐ ui.js

      • for example:

      • const onGetBooks = function (event) {
          event.preventDefault();
        
          // this is a simple example that does
          // not use `getFormFields`
          let bookId = $('#book-id').val();
        
          // this is the ajax request
          booksApi.show(bookId)
            // these are the callbacks
            .done(booksUi.onSuccess)
            .fail(booksUi.onError);
        
        };
    • api.js
      • WHERE HTTP REQUESTS LIVE

      • for example:

      • // this is what events.js uses as `booksApi.show'
        const show = function (id) {
          return $.ajax({
            url: app.host + '/books/' + id,
            method: 'GET',
          });
        };
    • ui.js
      • WHERE SUCCESS/FAILURE CALLBACKS LIVE

      • will modify DOM based on success/failure

      • only file capable of modifying the DOM

      • for example:

      • // these callbacks do not modify the DOM but you could refactor them so
        // that they perhaps render the book info received on success, or render
        //the error message on failure
        
        // this is what events.js uses as `bookUi.onSuccess'
        const onSuccess = function (data) {
          if (data.book) {
            console.log(data.book);
          } else {
            console.table(data.books);
          }
        };
        
        // this is what events.js uses as `bookUi.onError'
        const onError = function (response) {
          console.error(response);
        };