DEV Community: Kelsey Low

JavaScript RegEx

Kelsey Low — Sat, 16 May 2020 22:26:39 +0000

One of the most powerful tools in JavaScript is the ability to parse, extract, and validate data easily and efficiently using regular expressions (regex). While using regular expressions may seem a bit confusing and daunting at first, it’s a highly valuable and useful skill to master.

Regular Expressions Defined

Regular expressions are a pattern of characters that are used to construct a search. The defined sequence of characters describes what you are looking for. This can be anything from a single character to a complex pattern and may also include special characters. Using regular expressions we can not only search for a defined pattern, we can execute text replacement operations.

In JavaScript, a regular expression literal defines the desired pattern between two forward slashes.

let re = /abc/

This is most commonly how you will see regular expressions declared. The less common way is to use the regex constructor function.

let re = new RegExp(‘abc’)

Regex Modifiers

There are many modifiers that help make regular expressions more succinct. The following three modifiers are highly useful for even the most basic regular expressions.

i: case-insensitive matching

let str = “I am Sam.”
let re = /sam/i
>> Sam

g: global matching

let str = “I am Sam.”
let re = /am/g
>> am, am

m: multiline matching

let str = “\nI am Sam. \nSam I am.”
let re = /I/m
>> I

Regex Brackets

Brackets allow us to specify a range of characters to be included or excluded from our search. This works the same way with both letters and numbers.

Example: let str = “There are 8 planets”

[abc]: find any characters included within the brackets

let re = /[a]/g
>> a, a

[^abc]: find any characters excluded from the brackets

let re = /[^es]/gi
>> T, h, r, a, r, 8, p, l, a, n, t

[0-9]: find any number included within the brackets

let re = /[8]/g
>> 8

[^0-9]: find any non-number within the brackets (numbers are excluded)

let re = /[^8]/g
>> T, h, e, r, e, a, r, e, p, l, a, n, e, t, s

Regex Metacharacters

Next, we will take a look at regex metacharacters. These are characters with special meaning that help to quickly create specific and effective search patterns. Because there are so many metacharacters, we will only explore a few basic examples to get the gist of how they work.

Example: let str = “Feeling 90%”

w: find a word character

let re = /w/g
>> F, e, e, l, i, n, g, 9, 0

W: find a non-word character

let re = /W/g
>> %

d: find a digit

let re = /d/g
>> 9, 0

D: find a non-digit character

let re = /D/g
>> F, e, e, l, i, n, g, %

b: find a match at the beginning or end of a word
B: find a match not at the beginning or end of a word
s: find a whitespace character
S: find a non-whitespace character
r: find a carriage return character
t: find a tab character

Regex Quantifiers

The final aspect of regex that we will look at is quantifiers. Much like metacharacters, quantifiers act as an efficient way to build on our search pattern.

Example: let str = “Hello there user121”

x+: finds any string with at least one x

let re = /e+/g
>> e, e, e, e

x*: finds any string with 0 or more x’s

let re = /er*/g
>> e, er, e, er

x?: finds any string with 0 or one x

let re = /1?/g
>> , , , , , , , , , , , , , , 1, , 1

x{N}: finds any string with N x’s

let re = /d{2}/g
>> 12

Conclusion

Regular expressions are certainly confusing upon first glance. However just like any other programming principle, the more you practice, the more clear using regular expressions will become. Having a sound understanding of the basics of regex is highly valuable for efficiently combing through data and will play a significant role in how you approach this process within your applications.

When faced with a problem that can be solved using regex, it’s worth investing the time and effort to research which regex metacharacters and quantifiers may provide the best solution. The more you familiarize yourself with what’s possible using regex one problem at a time, the more readily it will come as you continue working with regular expressions. While it has the potential to be a tough nut to crack, feeling comfortable with regex is a worthwhile pursuit.

Beyond Bootcamp: Importance of Algorithms

Kelsey Low — Sun, 10 May 2020 18:36:13 +0000

While the growing popularity of coding bootcamps has resulted in countless eager new developers entering the job market every day, it’s also becoming increasingly difficult for an entry level engineer to stand out. As a bootcamp graduate myself, in my experience this method of training excels at teaching juniors how to learn quickly and comprehensively, hone problem solving skills and techniques, and develop solution-oriented perseverance. However, in the sprint to build a foundational working knowledge of how to construct programs, certain aspects of computer science and theology are often given less time and significance. It is not because these tenets are not of value, but because they are often complex and time consuming to fully understand.

One such subject that fully embodies this challenge within a bootcamp curriculum is understanding algorithms. All programmers, from the most naive new developer to the most experienced engineer, encounter algorithms. In this new age of accelerated learning through coding camps, this can be a difficult concept to dive into. Though fundamental to computer programming, bootcamps often skirt around the subject, exposing students to algorithms through metaphor and direct application. However they often chose not to expand on the necessity of algorithms in computing overall. As a new developer, taking the initiative to dive into this subject can help deepen your understanding of how and why programmers approach problems certain ways. The ability to show and discuss algorithmic concepts with confidence is also a valuable way to stand out from the crowd of new coders.

Algorithms Explained

At the most basic level, algorithms are purely a method for solving a problem. They consist of techniques or procedures that, when implemented step-by-step, will facilitate problem solving. This is exactly why algorithms are one of the most fundamental aspects of computing - After all, what is computing besides solving a series of problems?

When a user visits Amazon and a series of recommended products appear, this is the result of machine learning algorithms. When Google Maps shows a user the best route to their destination, this is the result of Dijkstra’s algorithm, which finds the shortest path between nodes in a graph. Ancestry composition uses sophisticated algorithms to calculate genetic health risks. Virtual assistant technology, such as Alexa, uses natural language and machine learning algorithms to recognize speech and learn user patterns. The list of problems that algorithms solve goes on and on.

Fundamental Learning

Given the examples above, it’s clear to see that algorithms can require very complex thinking. The good news is that there are many brilliant minds who thrive on this type of problem solving, and who create libraries and frameworks that can be applied in countless applications. These provide excellent tools that keep other developers from constantly reinventing the wheel. Leveraging the powerful and often well-tested algorithms that exist in numerous libraries is not only a great time-saver, but a practical way to work efficiently, enhance your application’s performance, and expand your own knowledge.

When it comes to general learning, there are a plethora of excellent resources for diving into algorithms. A great starting point is to ensure a strong understanding of data structures (arrays, binary trees, hash tables, stacks, queues, heaps, etc.) and math and logic (set theory, regular expressions, bitwise operations, permutations, combinations, etc.). In addition, flushing out computer architecture, such as how data is represented in computer, will help with growing into the more complex concepts.

There are many excellent resources available, from books (the classic Introduction to Algorithms) to forums (TopCoder), coding challenges (HackerRank) to online courses (MIT OpenCourseWare Introduction to Algorithms). Regardless of which avenue you choose, putting in the time and effort to deepen your understanding of algorithms will not only benefit your job search, it will expand your fundamental knowledge of computing and serve as a strong base for a successful career in software development.

React/Redux: To State or to Store

Kelsey Low — Sat, 02 May 2020 22:32:42 +0000

For newer React developers, the decision to use React component state vs. a Redux store can certainly feel a bit confusing. Time is often wasted wavering in indecision - Is it overkill? Is it necessary? Without a clear understanding of the pros and cons of each option, making the wrong decision may quickly lead to even more hours spent troubleshooting a poorly designed data flow in your React components - or worse yet, redevising your application upon realizing that a Redux store is the way to go. Let's try to distinguish which opportunities call for React state, or when a Redux store is in your best interest.

React Component State

React consists of two fundamental types of components. Presentational components are responsible for how your data will appear on the page. In short, these components are merely in charge of how things look. Meanwhile, functional components are responsible for providing the correct data to be displayed. Functional components achieve this by holding state - They accept data as props, which they pass to other components to be used or displayed.

Imagine you’re building an application for dog groomers. You have a presentational component that displays an index of all of your furry clients. Your functional component would be responsible for capturing the state of your client list, which is passed to your presentational component and displayed. If you add a new client to the application, the functional component would need to update its state and pass that along to the presentational component to be displayed. This state flow is unidirectional, it starts with a user action -> updates state -> changes the view to reflect the new state.

Redux Store

Now imagine you’re expanding your dog grooming application to include a weekly schedule and individual pet profiles. This would mean that the data relating to each client now needs to be passed to your original client index component, your new schedule component, and your new profile component. This is the critical point of distinction between when to use React component state or a Redux store. When data must be persisted to numerous components, it’s generally time to implement a Redux store.

The Redux store acts as a centralized location for your data. This makes passing data into your components very straightforward and clear. To dive deeper into this subject, check out Redux functions in the Redux docs (connect, mapStateToProps, etc.). It’s a very clean and powerful way to manage heavily-used and ever-changing state within your React application.

Conclusion

It’s nice to have numerous ways of maintaining state within a React app. For a simple application, using React component state to pass props around is a quick and effective solution. However, once an application begins to grow, passing around props in this manner can quickly become convoluted and difficult to troubleshoot. This is where a Redux store shines - It provides an efficient structure for storing and passing state from one convenient location.

The Basics of Redux

Kelsey Low — Mon, 20 Apr 2020 20:57:35 +0000

What is Redux?

Redux is a JavaScript library that focuses on managing application state. It’s commonly used in tandem with Angular or React to compose user interfaces. The core value of Redux is to ensure that applications behave predictably and consistently.

Imagine you open a music application and navigate to your favorite playlist. The application fetches the songs, displaying your chosen playlist. You then launch your notes application in order to cross reference a few song titles. When you return to your music app, you will find the app in the same state that you left it in - In this case, with your favorite playlist loaded. Maintaining this state requires help from both the user interface as well as the API.

How does Redux work?

Redux acts as a state container for data. Think of this like any other type of storage container. You organize your items into a storage bin in the manner you find most effective. All of your items are now conveniently located in one place. You can easily check the bin to determine what items are currently stored there. Additionally, you can just as easily perform a small action to change out items within the bin.

Redux operates in the same manner, with the “items” that are stored being data instead. When using Redux, the state of an application’s data is stored in one JavaScript object (the metaphorical “bin”), called the Redux store. While the state is read-only, you can simply define an action that will perform a state change. These changes are executed by a function, called a reducer, which takes in the current state and the described action, and returns the new state.

Why use Redux?

Redux follows the highly performant one-way data flow of React. Whereas passing props can become convoluted and error-prone within a large React application, Redux offers an efficient pattern for storing data, making it much more straightforward to manage and maintain the state of an application. With a little practice, the process of call (dispatching changes with actions) and response (processing those changes through reducers) is easy to implement and very effective.

Wrap Up

Redux is simply a state management tool for JavaScript applications. It’s intended to be a reliable state container that helps devise a consistent user interface. Though not always necessary for building smaller applications, Redux offers three key benefits that are valuable regardless of application size.

First, the store acts as a single source of truth, providing a predictable outcome and resulting in fewer bugs when syncing state. Second, due to the rigid process of actions, reducers, and the store, it’s easier to structure and maintain clean code. Finally, with a pattern consisting of small functions that have a single responsibility and are independent, code is easier to debug and test.

Node Package Managers

Kelsey Low — Wed, 15 Apr 2020 01:38:44 +0000

When it comes to Node Package Managers, you will certainly cross paths with both NPM and Yarn. If you’re a newer developer, you may not fully understand the differences between the two. Let’s take a dive into these package managers for Node.js and touch on why to use them.

NPM

NPM, or Node Package Manager, is the most fundamental package manager for Node.js. NPM is installed along with Node.js and consists of two things - First, it acts as an online repository for publishing open source Node.js projects. Second, it functions within the command line to interact with the project repository, helping to manage the project’s dependencies and package installation. In short, NPM is intended to manage the project dependencies defined within the package.json file, enabling packages to be installed with a single terminal command.

Yarn

Yarn is a newer package manager. The primary motivations for migrating to Yarn are its offline download feature and speed. Though sometimes a condemned practice, packages installed using Yarn are installed to the user disk. This way, when offline, Yarn retains the ability to install packages. Alternatively, because NPM requires the internet to install packages, it won’t clutter the local disk with packages that may only be used once. While both NPM and Yarn download packages from the NPM repository, Yarn caches all installed packages and installs them simultaneously, making it faster than NPM.

When to Migrate

Overall, using Yarn is very similar to using NPM. The added features and speed may certainly be advantageous, however there are two important asides to note. If you’ve already initiated a project utilizing NPM, transferring said project over to Yarn may create issues with installing native modules. Additionally, Yarn is not compatible with Node.js 5 or older. Outside of these conditions, migrating to Yarn should be considered if frequent offline use or an abundance of project dependencies are a factor.

Conclusion

While the use of both NPM and Yarn are quite similar and relatively interchangeable, Yarn does provide certain benefits in the way of added features and installation speed. On the other hand, NPM is straightforward and battle-tested. In the end, both package managers are highly popular, stable tools for managing Node.js packages.

Full Stack Dev: Front-End vs. Back-End

Kelsey Low — Mon, 06 Apr 2020 20:33:17 +0000

In general, full stack development appeals to the curious minded who value a highly thorough understanding of how a program works from start to finish. They understand how the web works and how to contrive server-side APIs, but they also master the client-side JavaScript that truly drives an application, as well as honing the visual design through CSS.

While the intrinsically scrupulous nature of a full stack developer is a highly valuable characteristic in any engineering position, some would argue that it also potentially inhibits the profound level of mastery that focused specialists can attain. Mullenlowe Profero’s Technical Director, Richard Szalay, has been quoted as saying:

”Full Stack has become a term for a junior-to-mid developer aspiring, sometimes a little prematurely, to be a Solution Architect in the more modern and pragmatic sense of the role.”

Though somewhat provocative, this idea does expose the delusive connotation of the title of "Full Stack Developer". As with impassioned novices across many industries, it’s admirable to aspire to attain a comprehensive understanding of their subject matter. However, it’s also important to recognize that at some point in the journey, specializing is what will allow you to truly acquire a cunning expertise in your field of choice.

Front-End

Frontend development covers all of the user-facing aspects of a website. This includes the overall visual design as well as architecting the user interface and experience. Frontend developers work closely with designers to identify user needs and devise solutions that may influence the design. Cross-functional collaboration is not only valuable, but essential in order to flush out shared goals and opportunities and to deliver an immersive user experience.

Frontend developers will specialize in client-side languages and must be particularly adept at HTML, CSS, and JavaScript. In addition, a thorough understanding of jQuery and Ajax are highly relevant and beneficial. It’s a useful bonus to be familiar with frameworks such as AngularJS, Bootstrap, React, VueJS, etc.

Senior Software Engineer with Stitcher, Madison Bryan, recently shared the following tips for novice frontend engineers:

Learn vanilla JavaScript well. Write in ES6. Typescript is getting more popular at large companies, this will set you apart. Learn HTML in and out and learn to use preprocessors (i.e. SCSS). Learn how to use CSS frameworks, such as Material CSS or Bulma, and how to use component libraries, which greatly increase your productivity. Use Webpack to optimize your build, Prettier and ESLint to write consistent code.

In brief, frontend specialists are often equally technically and artistically gifted, inclined to manage and modify the functional and visual elements that a user will interact with directly.

Back-End

Backend development includes all of the unseen sources that make the frontend of a website possible. This is where all of the data is stored. The backend contains a server, an application, and a database. Backend developers devise each of these components in a way that enables the client-side of a website to obtain information and operate appropriately.

Backend developers will specialize in server-side languages such as .Net, Java, PHP, Python, and Ruby. They will work with database tools like SQL or Oracle to manage data and data flow between the backend and frontend.

Madison Bryan from Stitcher had this to say for new backend engineers:

Learn many languages, NodeJS would be a good idea and Kotlin has gotten very popular. Learn microservices and all that goes along with it. Learn how to build containers, Docker is used all over. Learn caching (i.e. Memcached). Learn SQL, noSQL is gaining popularity as well.

In short, backend specialists are data wizards who thrive on architecting APIs and manipulating data.

Takeaway

“Full Stack Developer” could essentially be considered a generic title for a jack-of-all-trades (and master of none). Though indisputably dynamic, thoughtful, and valuable, in today’s market the full stack developer has two options - Choose to rest on your laurels with a broad, sufficient skillset, or hone your craft in a particular area to develop an astute expertise.

Why use create-react-app?

Kelsey Low — Sat, 04 Apr 2020 22:20:30 +0000

create-react-app is a commonplace, user-friendly starting point for building a React application. Built by Facebook developers, it’s a fantastic tool that gives developers a generous head start when building a React app. However, it’s easy, efficient nature also allows developers to glaze over the features and configurations that it readily implements. For the curious minds who want to understand what is happening under the hood, let’s take a deeper dive into create-react-app.

`create-react-app` Command

Running create-react-app *appName* immediately installs the dependencies needed for a React project and also generates an initial file structure. It creates a directory called appName, which contains three files and three folders (with React v3.4.1, as of this writing).

Generated Files
• package.json contains dependencies, defines project properties and descriptions, author and license information, and scripts
• package-lock.json secures specific version numbers for the dependencies
• README.md introduces and explains the project

Generated Folders
• src contains the functional code for the app (JS and CSS)
• public contains the HTML for the app
• node_modules is where npm modules are saved

Once the create-react-app command is run, it first checks your system and the specified output folder. If no errors arise, the createApp function runs, checking log files to ensure the output folder is safe. Again, if no errors occur, the command will move on to build the package.json file. This checks the installed versions of node, yarn, and npm in order to select the proper version of react-scripts to install. At this point, it’s also determined whether yarn or npm will be used - if yarn is installed, it will be used, otherwise the default is npm.

The command will then continue the installation with run(). This generates a dependency list, which will include react, react-dom, and the correct version of react-scripts. Based on the information previously gathered, packages are installed either from the internet or from the local cache if you’re offline. The packages are installed asynchronously to the node_modules folder, locking in the specific version number in the package-lock.json file. If for any reason package.json fails, it will provide a warning and delete both .json files as well as node_modules.

Assuming all goes well, the command will move on to check the package.json and package-lock.json files, loading package.json into a variable called appPackage. Then, it begins adding to the json. It adds several useful commands, which are outlined in the following section, along with defaultBrowsers, which targets appropriate browsers.

This wraps up the creation of package.json. Finally, the command will check for a readme file and name it appropriately. The src and public folders are generated to house the code for the application and with that, you’re ready to begin building out your React app.

Basic React Commands

Within the React project directory, several commands are accessible for use.

• npm start launches the development server and automatically reloads the page with any edits
• npm run build bundles the app into static files for production
• npm test starts the test runner and enables testing with Jest during development
• npm run eject removes the standard create-react-app setup, allowing for custom project configuration

The run build command executes the build field from package.json scripts, which will perform any necessary building or prep tasks that you define for your project, prior to it being used in any other project.

Jest is automatically configured and used to write tests for your components and logic. The test command launches a test runner and upon save, it will run your tests.

By using the eject command, you can circumvent the preconfigured build settings that create-react-app generates. It’s important to note that once you eject, it cannot be undone. Ejecting gives you total control over the configuration files and dependencies.

Conclusion

Create-react-app is a great tool for optimizing efficiency when developing a React app. It’s a well-proven configuration and build tool that quickly implements a project’s file structure and dependencies. As with all tools, it’s important to have a fundamental understanding of how it works and what it does. I hope this brief dive into create-react-app generates some deeper understanding of how this tool operates.

What is NodeJS?

Kelsey Low — Thu, 26 Mar 2020 01:56:15 +0000

By definition, Node.js is an open-source cross-platform server-side runtime environment built on Chrome’s V8 JavaScript engine, which executes JavaScript code outside of a web browser. But what exactly does all of this mean?

Put more simply, Node is a framework that allows us to run JavaScript on the server. Let’s take a closer look and flush out exactly what Node is and why you should understand it.

Background

Each browser has its own JavaScript engine, which functions to translate JavaScript code into code the computer can read. (As a quick aside, this is why JavaScript may behave differently in different browsers.) Chrome’s engine is called V8 and is the fastest JavaScript engine available.

Before the creation of Node, JavaScript could only be run in the browser. This is because the browser provides certain objects that assist with executing JavaScript tasks. In order to run JavaScript outside of a browser, we would need objects that could allow us to manipulate files, databases, and servers. This is exactly what Node was created to do. While other tools and frameworks (ASP.NET, Django, Rails) tackle this same problem, Node has one massive benefit - it can act asynchronously.

JavaScript Event Loop & I/O

JavaScript’s event loop consists of a call stack. It works through the call stack, executing each request in order. The stack works efficiently to save time and enhance performance. If a request requires a database query, its corresponding callback is sent to a secondary queue so that the main request can continue to execute. It doesn’t wait around - it continues working through the call stack and will come back to the initial request once it has everything needed to execute it. So, once the query is returned, that callback is dropped into a waiting queue so that as soon as the engine is free to execute it, it will run.

Event looping is how IO, or input/output, is managed. IO consists of everything from reading and writing files to handling HTTP requests. This can be managed either synchronously (blocking IO) or, as with Node, asynchronously (non-blocking IO).

Blocking IO will literally stop everything from executing until the initial request is completed. During that time, memory and processing are being consumed while performance dwindles. Alternatively, non-blocking IO benefits from the asynchronous event looping of JavaScript. The server can serve many requests at the same time in a more efficient and performance-rich fashion.

Node Modules & NPM

Node modules are open-source libraries that are shared across the community because they solve a vast number of basic problems. Each module is independent and doesn’t impact other code within a project. This allows us to modularize our projects, adding in preexisting code to handle common needs. These modules are bundled together by way of NPM, Node package manager, implementing a number of complex solutions and features in one simple file - a significant boost in development efficiency.

Why Know Node?

With just this basic understanding of how Node works, we begin to see why it is so valuable. Node enables us to generate fast, responsive, dynamic page content. This is all because Node allows us to CRUD (create, read, update, delete) resources on the server, modifying and returning data from the database on the fly.

Many leading websites that you likely use regularly, from Netflix to Uber, use Node. It makes sense to use Node purely due to the powerful, user-friendly performance benefits. Add in the simple and invaluable implementation of libraries to create a rich network of features that manage everything from data to routing, and even animation - it’s easy to see why Node is an indispensable tool.

Perks of the Dev Log

Kelsey Low — Fri, 20 Mar 2020 23:14:07 +0000

Though far from controversial, the practice of maintaining devlogs can be a somewhat polarizing idea amongst developers. Is it a waste of precious development time and brainpower? Or is it a necessary tool to optimize efficiency?

Whichever side you take is likely an indication of your personal project organization and workflow style. As a junior developer, I'm an ardent believer that devlogs are a wildly beneficial habit to develop early. Despite personal tendencies and preferences, consider this...

• You're due for a project status report with your senior.
• You're feeling slightly stagnant and looking for areas of personal growth.
• You're feeling confident with your skillset and ready to go for the big promotion.

As developers, we solve a lot of problems and see a lot of code. When it comes time to produce measurable results, invest in new skills, or share our achievements, having devlogs makes accomplishing these objectives easy and insightful.

Nitty Gritty Details

Perhaps the most fundamental value of a good devlog is that it provides a space to capture the minute details as a project unfolds.

• What did you work on each day?
• When was a certain feature implemented?
• Why was one method used over another?

As we code, we quickly assess our needs, make decisions, and implement elements or changes. Problem solving becomes second nature to the point that we may not always be fully aware that we're making critical decisions.

Keeping a thorough devlog is an opportunity not only to document those decisions, but to take pause and consider why we've made that choice and if it's the best method. Especially as a junior, I believe this is valuable way to step back and build a thoughtful, well-rounded approach to problem solving.

Aside from the opportunity to enhance our critical thinking, storing this type of information in a devlog makes project reporting a breeze. It's as easy as perusing your notes for the past week and sharing the highlights with your senior. Your devlog doesn't have to be verbose, it's simply a space to save the nitty gritty details for future reference and reflection.

Guidance and Growth

Devlogs can be a powerful resource for project management as well as personal reflection. Apart from documenting what was done, devlogs are often used to organize daily and general project objectives. Beyond scheduling, this is the perfect place keep a code journal of sorts, noting challenges and the steps taken to find a solution.

Having a sense of workflow is an important way to stay on track and meet goals efficiently. I like to kick off my daily workflow by gathering my thoughts and jotting down daily targets and stretch goals. This has proven to help keep me more focused and productive overall. Being able to mark off each goal as it's met is not only rewarding, but makes it easy to have a sense of what was accomplished (or what proved difficult) each day.

Of course, not all days are filled with wins. By nature, software development requires constant curiosity, an awareness of our limitations, and the motivation to expand our understanding. Devlogs give crucial insight into what proved challenging and where we can look to improve our skillset. Both throughout a project as well as after completion, it is highly valuable to reflect on the barriers that we've encountered. This gives us the opportunity to enhance areas of personal weakness and grow as developers.

Both the organization and the observations that a good devlog provide are essential to structuring and learning from each and every project.

Final Thoughts

The achievements, the difficulties, the solutions, and the strains that a devlog maintains give us valuable insight into our personal knowledgebase. Though at times it may seem mundane, it's a concise way to document the story of how we are growing as developers. Whatever the objective is - to produce an impressive application for your boss, to explore and enhance your own knowledge, or to prove yourself to be a valuable asset - devlogs are an astute resource for organization and reflection.

Getting React-ive

Kelsey Low — Sun, 15 Mar 2020 22:19:58 +0000

For my capstone project with Flatiron School's software engineering program, I was tasked with developing a React/Redux application. The concept for my project was to design an easy-to-use digital flight logbook for pilots, titled ECHO. It’s important to maintain a backup flight log in order to calculate hours and confirm endorsements if a physical logbook is ever lost or destroyed. The benefit of a digital logbook is the ability to store years of flight information in one, centralized location, rather than combing through dozens of material logbooks.

The basic user experience entails securely signing up and logging in, browsing an index of existing flights with basic information, selecting a specific flight to view detailed information, and adding new flights to the logbook.

Step 1: rails new --api

A Rails API backend handles data persistence within the app. I utilized the following workflow to implement a simple Rails backend.

First and foremost, I took care of the basics - Activating CORS and updating the API port to 3001 (leaving port 3000 available for NPM). Next, I jumped in to creating my fundamental resources, in this case generating users and flights.

Upon generating my resources, I immediately implemented api/v1 namespacing for best practice, in case future updates are applied. Next, I got to work defining model relationships (user has_many flights, flights belong_to users) and adding validations.

I then considered how I would like to serialize the data and chose to incorporate the fast_jsonapi gem. Using this gem, I added serializers for the user and flight resources. Finally, I thought about which controller actions would be required for each resource. I added basic index, show, and create actions to the users controller. I included all of the CRUD actions to the flights controller. Then, I created some simple seed data and was ready to migrate the database and test the API.

Step 2: create-react-app

Per the requirements for this project, I used create-react-app to generate the client side of my project. This allowed me to quickly start building out the frontend of my single-page application. This generator provides the essential structure and tools needed to jump right in to designing a React application.

Step 3: react-redux & redux (redux-thunk, too!)

React and Redux work together to render and store data on the frontend of the app. I followed these next steps to build out the client side.

I started by configuring the Redux store and wrapping the base App component with the store Provider, as well as react-router-dom’s BrowserRouter. BrowserRouter allows for declarative RESTful routing without page refresh. With these in place, I was able to begin developing the Redux store. Utilizing redux-thunk action creators, I built the critical user actions and user reducer to simply store all users. I implemented a root reducer to manage combined reducers, and added the user reducer here.

After using DevTools to check that users were now in my store, I built a basic home page component to be rendered from App. Next, I dove into developing login functionality. I incorporated the bcrypt gem along with sessions to the backend to securely manage user passwords. On the frontend, I built a login component and made the decision to manage the form’s state through the Redux store, rather than in local state. The final piece of the puzzle was creating the actions and the reducers to handle creating and setting the user properly, along with updating and resetting the login form’s state. Next, I added in a comparatively simple logout component with the associated actions and reducer to clear the user’s session. With everything in place for login, I was able to reuse a good deal of this functionality to devise a sign up component.

With user login, logout, and signup in order, I then moved on to implementing the flight form and log. I began by developing a flight log container that would render flight index cards on the user’s main account page. I built a flight card component to render basic flight details and then got to work on the larger form component. I incorporated two containers for the form, one for new flights and the other to edit an existing flight. For flight actions, I first built out the form’s simple actions and reducer to update, reset, and set the edit values for the form. As with login, flight form data would be managed in the Redux store rather than locally. Then it was time to tackle adding all CRUD actions for flights, including setting the current user’s flights.

As expected, the vast majority of time and troubleshooting for this project was spent on step 3. I found the biggest challenge to be deciding to go with a specific design pattern, only to realize I should redesign in a more efficient manner. This was the source of the biggest headaches as well as the most rewarding “aha!” moments on this project.

Step 4: react-router

Time to circle back to react-router-dom’s BrowserRouter. This functionality was actually integrated in tandem with each piece of step 3, but deserves a quick, special aside. In order to use RESTful navigation on a single-page app without refresh, the main App component must use BrowserRouter. This enables us to declare custom routes which render an associated component, allowing for useful, descriptive URLs based on the current content. For example, visiting “/login” renders the login component, or typing in “/flights/:id/edit” shows a specific flight’s edit page. This makes traversing the application more user-friendly and predictable.

Final Thoughts

Developing ECHO was a wonderful learning experience and truly helped me to gain a deeper understanding of React and Redux. If anything, my biggest takeaway is that there are a thousand different ways to accomplish something, especially in programming. However with each new problem, some of those approaches will whittle away and the opportunity to learn and enhance your processes and patterns will emerge - the goal is to stay receptive and react-ive to those opportunities.

DEV Community: Kelsey Low

JavaScript RegEx

Regular Expressions Defined

Regex Modifiers

Regex Brackets

Regex Metacharacters

Regex Quantifiers

Conclusion

Beyond Bootcamp: Importance of Algorithms

Algorithms Explained

Fundamental Learning

React/Redux: To State or to Store

React Component State

Redux Store

Conclusion

The Basics of Redux

What is Redux?

How does Redux work?

Why use Redux?

Wrap Up

Node Package Managers

NPM

Yarn

When to Migrate

Conclusion

Full Stack Dev: Front-End vs. Back-End

Front-End

Back-End

Takeaway

Why use create-react-app?

create-react-app Command

Basic React Commands

Conclusion

What is NodeJS?

Background

JavaScript Event Loop & I/O

Node Modules & NPM

Why Know Node?

Perks of the Dev Log

Nitty Gritty Details

Guidance and Growth

Final Thoughts

Getting React-ive

Step 1: rails new --api

Step 2: create-react-app

Step 3: react-redux & redux (redux-thunk, too!)

Step 4: react-router

Final Thoughts

`create-react-app` Command