Code Monkey home page Code Monkey logo

organize-trek-js-activity's Introduction

Exercise: Organizing your JavaScript

To prepare for utilizing a new JavaScript library, we want to go though an exercise of organizing your JavaScript code into the logical components. We have implemented more functionality in this Trek app than your requirements to increase the complexity of this application. For this exercise, we are going to look at some JavaScript code and think about the pieces of it within our larger context of an MVC framework.

Note that there is not a specific right or wrong answer with this exercise. Our goal is to think about how we can divide our JavaScript applications into components once our application gets large enough to no longer make sense within a single JavaScript file.

Step One: Data

Examine the data that the website is displaying? What pieces of data need to be tracked? Are there any collections of data?

Step Two: HTML

Look at the different web pages that the user sees when they navigate around the site. Identify which pieces might lend themselves towards an HTML template. Do any of these HTML pieces that you've identified align with the data you identified in Step #1?

Step Three: Actions

Next, examine the actions that the user can do on the website. What things can the user do? Are these actions related to a specific piece of data or a collection of data?

Step Four: Putting it all together

Now based off of each of the previous steps, take the printed out code and organize it according to the components you've identified. Which actions belong with which data? Which HTML Template might be rendered by a particular action?

organize-trek-js-activity's People

Contributors

pilgrimmemoirs avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.