Full Stack Web Development Standards [FSW]

Introduction

The Full Stack Web specific standards build on the Language Fundamentals to introduce advanced JavaScript concepts and syntax, Node.js, Express, SQL, React, and Redux. Fellows learn industry best practices to build complex and efficient full stack applications from the ground up.

Advanced JavaScript

FSW.1 Understand all advanced JavaScript and ES6 concepts/methods.

FSW.1.a Understand advanced array methods (at least: forEach, map, filter, reduce). Utilize advanced enumerables appropriate to the need while iterating (e.g. using filter when they want to exclude particular items from an array.

FSW.1.b Understand callback functions, Promises, and asynchronicity. Utilize Promises and callback functions to control when functions/code blocks run.

FSW.1.c Understand the fs module and other advanced built-in Node libraries. Read from and write to text and JSON files.

FSW.1.d Understand advanced object manipulation by way of iteration or direct access (e.g. dot notation). Manipulate and extract information from deeply nested objects.

FSW.1.e Know date and time functionalities. Utilize date and time to ascertain the current time and compare it to other dates/times.

FSW.1.f Know basic regular expressions. Ascertain whether specific substrings are utilized in a document via regex.

NPM and Package Management

FSW.2 Know how to utilize and create modules and manage module imports via NPM.

FSW.2.a Know best practices in file structuring and organization. Effectively organize, delegate, and group modules and files.

FSW.2.b Create, export, import, and utilize modules appropriately.Utilize module.exports, export default, require, and import to make data and functions available across file structures.

FSW.2.c Utilize NPM and package management via a package.json file. Initialize a project with NPM, installing and saving relevant NPM modules.

FSW.2.d Demonstrate familiarity with documentation and module usage. Obtain familiarity with new NPM modules quickly using documentation and experimentation in projects.

CSS and HTML

FSW.3 Master CSS and HTML to create functional and well designed UIs.

FSW.3.a Know all common HTML element types, HTML tagging, including CSS selectors.

FSW.3.b Semantic HTML and frontend accessibility.

FSW.3.c Utilize HTML inputs, forms, and form behavior.

FSW.3.d Know the CSS box model, CSS styling and positioning, with a strong emphasis on Flexbox and Grids.

FSW.3.e Utilize relative widths, media queries, and responsive web design to create responsive UIs.

FSW.3.f Implement a design based on mockups/specifications/or an existing website. Create wireframes.

The DOM and Static Sites with JavaScript

FSW.4 Know how to combine "vanilla" JavaScript with HTML/CSS via the use of the Document Object Model. Create static sites combining HTML, CSS, and JavaScript.

FSW.4.a The conceptual underpinnings of the DOM, including the notion of a tree with nodes and what that represents.

FSW.4.b Manipulate content and styling on the page by utilizing DOM Events and Event Listeners.

FSW.4.c The HTML script tag, synchronicity, and the usage of JavaScript on static HTML pages.

React Basics

FSW.5 Proficient with the basics of React.

FSW.5.a Understand the concept of a 'single-page application', how React interacts with the DOM, and what's done behind the scenes to render React components in HTML/CSS.

FSW.5.b Fluent in JSX and component syntax.

FSW.5.c Know lifecycle methods (including componentDidMount, componentWillMount, componentWillReceiveProps) and the component lifecycle more generally (what runs when).

FSW.5.d Understand state, updating state via setState, and passing state via props to child components. Set an initial state and update it based on information received from the user or other third-party sources. Store a single state and corresponding methods in a parent component and pass down content via props.

FSW.5.e Able to set up React applications, from scratch and utilize build tools like create-react-app.

FSW.5.f Render visible HTML inside a react-dom connected element and change/update rendered content based on user input, successful AJAX requests, or other triggers.

FSW.5.g Utilize information in state to accomplish tasks for the user, such as fetching from an API or processing and rendering state data in useful ways.

React Routing and Architecture

FSW.6 Proficient in advanced React routing.

FSW.6.a Set up a project using react-router that compiles and renders components to users. Use routing to render desired components on a page for specific URL extensions.

FSW.6.b Explain the logic behind their component structure, routing and route naming, and links between routes.

FSW.6.c Understand the usage of path versus exact path.

FSW.6.d Utilize nested routing through multiple components in a React project.

FSW.6.e Planning and implementing a sensible structure for a frontend project's routing.

FSW.6.f Describe the difference between frontend and backend routing. Explain the logic behind their component structure, routing and route naming, and links between routes.

Redux, Context, and Advanced State Management

FSW.7 Capable of using Redux, Context, or other state management tools to centralize and manage their state and create React apps using routing, centralized state management, and responsive design to seamlessly integrate and standardize the frontend experience.

FSW.7.a Understand the problem of 'prop drilling' in a stateful vanilla React application.

FSW.7.b Understand the concept and appeal of a 'single source of truth' and the concept of a centralized, immutable state, updated only via actions.

FSW.7.c Describe and utilize Redux, including action creators, reducers, containers, and stores. Utilize, separate, and recombine reducers to centralize actions and parts of state.

FSW.7.d Describe the appeal of Context and utilize it to create centralized state on small to medium-sized projects.

FSW.7.e Know how to discern, based on the scope of a project, whether Redux, Context, or vanilla React is most appropriate.

Build Tools and Connecting React Applications to Backend Servers

FSW.8 Know the fundamentals of transpiling and bundling React applications.

FSW.8.a Know what bundling tools like Webpack do and why they are important.

FSW.8.b Know what Babel does and how to configure it for a production application.

FSW.8.c Know when to use automated build tools, such as create-react-app, what their purpose is, and how to utilize build tools while deploying a frontend application.

FSW.8.d Deploy a React project utilizing platforms like Netlify and Heroku.

Node's HTTP module

FSW.9 Know about and be able to utilize Node's built-in HTTP module.

FSW.9.a Create an HTTP server on a particular port.

FSW.9.b Process requests via URL parameters, returning responses based on the param.

FSW.9.c Send text, HTML, images, and other file types.

Express Syntax

FSW.10 Understand the fundamentals of the Express web framework.

FSW.10.a Know how to set up an Express application manually and using the express-generator tool. Create an Express application that starts via npm start on any port.

FSW.10.b Know how requests are routed through an Express app, and how to send particular response codes and response types. Send responses and handle errors through the HTTP request-response cycle.

FSW.10.c The basics of how to set up Express views using a templating language.

Routing, Middleware, and Error Handling

FSW.11 Understand how requests are routed in Express. Route specific requests from the frontend to functions that produce intended responses as required by an app's needs.

FSW.11.a Utilize Express routing and callback functions connected to routes to send specific responses.

FSW.11.b Understand the purpose and application of Express middleware, including parsers, sockets/streams, and user authenticators. Set up middleware in an Express application to produce desired outcomes for particular requests from the frontend.

FSW.11.c File structuring, nested routing, and the usage of the 'next' keyword to escape undesirable responses. Error handling in Express, both the philosophy of descriptive HTTP errors and their application. Throw descriptive errors and utilize the 'next' keyword to route them efficiently to particular responses.

SQL Syntax

FSW.12 Have an advanced understanding of SQL syntax.

FSW.12.a Know all basic SQL verbs, including SELECT, UPDATE, CREATE, DROP, JOIN, and INSERT.

FSW.12.b Understand the usage of WHERE clauses, as well as aggregate functions, including SUM and COUNT. Attain numerical information about tables using aggregate functions (e.g. not iterating).

FSW.12.c Know data typing in SQL, including all basic types, plus NULL.

FSW.12.d Know advanced SQL query syntax, including the effective usage/synthesis of JOIN, SELECT within SELECT, and aggregate functions.

SQL Database Architecture

FSW.13 Structure a SQL database based on the needs of the application. Design, structure, and seed a database for a full stack CRUD application.

FSW.13.a Create an .sql file with complete table structure, database-level validations, and seed data.

FSW.13.b Determine whether information should be a column or a separate table, based on access, convenience, and architectural best practice. Justify the structure of a database they designed to an interviewer.

FSW.13.c Know what a join table is and how to utilize it to create associations between many-to-many related tables.

Postgres and pg-promise

FSW.14 Understand Postgres and how to integrate Postgres with an Express server.

FSW.14.a An awareness of what Postgres is and how it's different from similar systems (e.g. MySQL).

FSW.14.b An understanding of the Node package pg-promise and how to utilize it to make SQL requests in promisified ES6 JavaScript.

FSW.14.c Set up an Express application that utilizes Postgres and pg-promise to create/extract/update/delete information from a Postgres database, process it as an HTTP response object, and send it to the frontend.

Full Stack Application Architecture

FSW.15 Understand how to set up and structure a full-stack application. Plan and execute a full stack application skeleton with a structure based on specific needs/design principles.

FSW.15.a Know the difference between frontend and backend applications.

FSW.15.b Understand servers, ports, and port management.

FSW.15.c Able to Connect and sync frontend and backend applications and their corresponding states.

FSW.15.d Utilize NPM and module management across multiple NPM based applications.

Backend-Frontend Integration and Deployment

FSW.16 Understand how to integrate and deploy a full stack application, including separate SQL, Express, and React elements. Set up, launch, and maintain a full-featured full-stack application on Heroku, utilizing auxiliary services (such as S3) when necessary.

FSW.16.a Know how to set up proxies for AJAX requests made from the frontend.

FSW.16.b Know how to process requests in Express to ensure that the user consistently sees the React frontend in a production build.

FSW.16.c Know how to hosting a full stack application on Heroku, including a Postgres database, setting up environment variables for the Heroku database URL.

FSW.16.d Utilize tools such as AWS S3 to upload/host media, such as images, audio, and video.