Clear & readable: Must pass the course's standard .eslintrc and use semantically meaningful variable names and function names.
Efficient
Remove source code redundancy using techniques such as OOP. Apply DRY principles.
Remove computational redundacy. Cache computed results if the results are re-used; e.g., If a DOM query always finds the same DOM element(s), run the query only once and store the result in a variable, and use the variable from that point onward.
Encapsulate all data (i.e., variables) and functions in objects, with rare exceptions (e.g., code that initializes objects on app load).
OOP: Encapsulate all data and functions (exceptions are possible, but get buy-in from an instructor first), and use object constructors and prototypical inheritance where appropriate.
Semantic object design: objects are appropriately defined to represent distinct models and features ("Group together stuff that belongs together, and in a way that makes sense").
Use AJAX to retrieve JSON or XML data. Write a higher order function (HOF) that makes the AJAX call. To use the HOF, pass a "next" function to it. The HOF should make the AJAX request and specify next(data) as the AJAX callback. next() should process data. You might have your next function call a VIEW function to display the data. The HOF itself deals with data, so it should be in a MODEL JavaScript file.
Functional-programming: Use array methods, higher-order functions, and at least one closure.
Persist app state using localstorage, WebSQL, or another database (if you do the extra credit item where you persist data in a server-side database, you don't need to use a local means of storing data).
Write middleware that handles CRUD operations on your database.
Build a single page app and use client-side routing for at least two routes. Use RESTful routes and route handling.
Test: Every time the URL string in the browser's URL bar changes to a new route in your app, your app should correctly render the corresponding page. This should happen for any of the following events that cause the URL to change:
User event in the viewport (e.g., mouse click or [return] keypress on a nav bar item that has a route for its href).
User loads a bookmarked URL or types a URL in the URL bar then hits [return]. <-- OFTEN OVERLOOKED Test this case with every route, then debug if needed, before submitting your final app.
Use MVC components that are loosely coupled, semantically named/labelled, and are well-documented as MVC in code comments.
next(data)
as the AJAX callback.next()
should processdata
. You might have yournext
function call a VIEW function to display the data. The HOF itself deals with data, so it should be in a MODEL JavaScript file.href
).