Project Q&A Flashcards
What is React?
React is an open-source JavaScript library created by Facebook for building complex, interactive UIs in web and mobile applications.
It represents the “view” layer of MVC.
Is Austana a single-page app or not? What about Roastia and Super? What are the tradeoffs of having a single-page app?
A single page app is one that uses client-side rendering as opposed to server-side rendering.
The browser loads the initial page from the server, along with libraries, frameworks, stylesheets and app code.
Navigation to other pages do not trigger a refresh. New data is provided by AJAX requests that return JSON. The SPA then dynamically renders with JS.
Pros:
- Feels more responsive and no flash between loading pages
- Fewer HTTP requests made to the server
- Separation of concerns between client and server
Cons:
- Heavier initial page load due to loading of framework, app code and assets
- Additional step to configure a single entry point for all requests and allow client-side routing to happen from there.
- SEO, b/c JS is not crawled by all engines. You can use services like Prerender to save static HTML and serve it to the crawler while still rendering JS to the browser
How did you use Redux in Austana and Super? Describe the flow.
I used Redux primarily to manage state and connect relevant components to the central store of Redux so they can access data without unnecessarily passing it through props of all components.
Explain what happens when a user first navigates to austana.com
We run Webpack, which bundles our modules and builds a dependency graph of all modules needed for our application. It bundles up page specific javascript packets and runs them through babel.
We boot up Puma, the built-in rails concurrent web server.
We hit our backend routes and Rails initializes the app.
The client makes a GET request which hits our StaticController #root endpoint by default and renders static_pages/root.html.erb
After http response is fulfilled, we go to our Webpack entry file, Austana.jsx.
We add an event listener on the document that waits for the DOM to load. When it does…
We configure our redux store, and then find html element with id “root” that we specified earlier. We attach ReactDOM to this element and use it as a container for rendering our application.
React then uses its diffing algorithm to control any future renders in this container.
We then pass the Redux store we created to our Root React component as props.
Redux then maps state to props for our connected components.
We hit the lifecycle methods of the components we want to render.
We could hit componentDidMount, which might execute an action from our props to fetchTasks.
Redux then uses dispatch to dispatch the action. We go to our Task Actions, for instance, and use Redux thunks to call the action if it is a function (i.e. an API call).
When our thunk action is invoked, (fetchTasks), we invoke our API util method (fetchTasks) that creates an AJAX request with jQuery using an api endpoint (‘api/tasks’).
This goes to our routes –> TasksController#index –> Renders JSON response using jBuilder.
With this response, we use .then to create an action (receiveTasks) by invoking that function and pass the results as an argument to dispatch to dispatch our new action object to our reducers.
This dispatched action hits the reducer, which return the data in the action and updates the store. This then updates props for connected components, which can now render the data onto the VirtualDOM.
What is express.js and how did you use it in your project?
It’s the de factor web application server framework for Node.js.
In my MERN stack projects, I used Express for routes and api endpoints. It takes in a route, request and response.
I used bodyparser to parse the JSON responses that I sent to my frontend.
What is GraphQL?
When adding GraphQL to an application, you as the developer will define the Types (nodes) and Relationships (edges) between the data in your application.
We will still need access to our data through some API to tell GraphQL where the data is located. However, GraphQL will package these requests into a single request tree which will be fulfilled on the backend and returned in its entirety.
Simply put, GraphQL is a query language that traverses your data graph to produce a query result tree.
Explain: “Utilized Redux and asynchronous JavaScript with a RESTful API to provide a seamless user experience across all React components.”
Redux helps us by allowing our state to be stored in a global store, so that any component to connect to the store to access the data instead of feeding it through the props of every component in a chain.
Asynchronous JavaScript was accomplished through using redux thunks that triggered AJAX requests with jQuery and then created an action that then hit the reducer and updated the state. Then the component could render with the data. Asynchronicity in the component was accomplished through Promises, lifecycle methods and conditionals.
Redux Thunk is a middleware that lets you call action creators that return a function instead of an action object. That function receives the store’s dispatch method, which is then used to dispatch regular synchronous actions inside the body of the function once the asynchronous operations have completed.
Explain: “Incorporated Webpack and Babel to ensure UI cross-browser compatibility.”
Babel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don’t support certain features natively, Babel will help you transpile / compile those features down to a supported version.
With webpack, you can configure how different types of files should be transpiled. You configure rules like this.
We used Babel for .jsx and file-loader for .png, .svg, etc.
Webpack: entry(austana.js) and output (bundle.js)
Explain “Implemented backend and frontend authentication with Rails models, BCrypt and React Router to enhance user privacy.”
Frontend authentication:
Used Protected and Auth routes that rendered components based on whether there was a session_id present in state (i.e. a user was logged in). Used React Router. Mapped state to props for Protected and Auth React components, which returned routes with the relevant props.
If not logged in, used React Redirect to point to home page.
Backend auth:
Used Bcrypt to create a hashed password digest. We then verify the correct password by running it through hashing function and comparing the value. If it checks out, we establish a session token that is stored in database and state.
Explain “Leveraged the Draft.js library with React components to build a rich-text editor that facilitates an author’s ability to create,
edit and read articles, format text with an inline toolbar and add images by URL.”
Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.
Draft.js allows you to build any type of rich text input, whether you’re only looking to support a few inline text styles or building a complex text editor for composing long-form articles.
API Basics:
Controlled inputs
—————————————————————————————————————————————————————
The Editor React component is built as a controlled ContentEditable component, with the goal of providing a top-level API modeled on the familiar React controlled input API.
As a brief refresher, controlled inputs involve two key pieces:
- A value to represent the state of the input
- An onChange prop function to receive updates to the input
This approach allows the component that composes the input to have strict control over the state of the input, while still allowing updates to the DOM to provide information about the text that the user has written.
Controlling rich text
———————————————————————————————–
In a React rich text scenario, however, there are two clear problems:
- A string of plaintext is insufficient to represent the complex state of a rich editor.
- There is no such onChange event available for a ContentEditable element.
State is therefore represented as a single immutable EditorState object, and onChange is implemented within the Editor core to provide this state value to the top level.
The EditorState object is a complete snapshot of the state of the editor, including contents, cursor, and undo/redo history. All changes to content and selection within the editor will create new EditorState objects. Note that this remains efficient due to data persistence across immutable objects.
Used onChange prop, inline toolbar plugin and library functions like findLinkEntities to manipulate styling and functionality of rich text editor.
Explain: “Employed the Mongoose populate functionality and Express router to fetch data for a specified article from multiple collections with a single API call.”
1) Issued axios request through redux thunk.
2) Hit our express api endpoint.
3) Initiated Mongoose query “findByID”
(Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDB)
4) We call populate, which lets us access documents from other collections. In this case, we used the article id and populated comments, authors, articles and likes.
Explain: Integrated Mongoose, MongoDB, GraphQL queries and React Autosuggest to design a partial text search, which allows users to search for coffee shops and coffees based on a variety of attributes and view updated suggestions as they type.
MongoDB does not directly support partial-word matching as it does with full-text search.
Our aim was to A) achieve partial-text search with MongoDB that integrates with Mongoose, React Autosuggest and related GraphQL queries, as well as B) accomplish this on both the Coffee and CoffeeShop collections to provide the user with versatile search.
We achieved partial-text search by designing a GraphQL endpoint searchShops that incorporated MongoDB $regex matching for the search string with Mongoose queries for both collections (see code snippet below).
Explain React hooks and search query string
Used query-string package. Pushed filter string into history as property when search is executed. Used useLocation() hook to retrieve and then parse query string. Fired off useQuery() hook based on query string.
