DEV Community: Bry

Using Flask-Marshmallow for easy JSON Serialization

Bry — Mon, 09 Oct 2023 03:20:48 +0000

I think it's safe to say everyone likes to make things in their lives just a little bit easier. During the past two weeks, I've been developing a full stack application that utilizes the Flask framework for Python and SQLAlchemy as it's backend. When I first started to think about my model structures, I was curious how I was going to control what these would look like when transformed into the JSON used by my frontend. I tried to use Serializer Mixin, but with so many interconnected bi-directional relationships the need for multiple serialization rules just made things really messy.

In Comes Flask-Marshmallow!!

Flask-Marshmallow made things much more simple, clean, and easy to understand. It's going to be my go-to serializer for the time being, simply because of how easy it made controlling what my JSON responses included and how it was integrated into my Flask routes. Today I am here to take you through a semi-brief walkthrough on the in's and out's of creating schema's for two models and a simple join table, and how we utilize Flask-Marshmallow to shape our JSON responses to frontend requests. I will not be going over the specifics on how to set up the models or the join table - I have a separate blog post HERE that goes through the steps to create models and a join table with SQLAlchemy.

Getting Started

First things first: Obviously we are working with Python and Flask, but we will need to install the necessary dependencies in order to use Flask-Marshmallow. Since I am using SQLAlchemy to define my models, I installed both Flask-Marshmallow and Marshmallow-SQLAlchemy. Using a Python Virtual Environment, you can run the following command to install both simultaneously:

pipenv install Flask-Marshmallow SQLAlchemy-Marshmallow

Once these are installed, there is an import and variable setup we need to utilize Marshmallow in our app. Wherever you decide to define your schema's, you will need to do two things:

from flask_marshmallow import Marshmallow - This will import the Marshmallow class that will help Marshmallow integrate with Flask
ma = Marshmallow(app) - This sets up the Marshmallow instance for your Flask app. The ma variable will be used to setup our schema's! Be sure you import your app to be used here!

The Models

For this example, I will be using 3 models: a User, a Game, and a UserLibrary model. I'm not going to go into depth on these - all 3 are relatively straight forward SQLAlchemy models that are similar to the models I outline in my previous blog post:

The Schema's

The coolest part about Flask-Marshmallow for me was setting up my schema's. The schema's offer a pretty intuitive way to self define what we send to our frontend through JSON serialization. This makes it really easy to manage things like sensitive user data, or data that only needs to be utilized on the backend of your application. The best part is that they are defined very similar to how a SQLAlchemy model is defined, with some obvious differences. I'm going to breakdown my User_Schema as an example:

In our user schema, we have defined all of the data we want to send back to the frontend side of our application about the user. We could change this if, for example, we did not want to send back the user's email to the frontend. Maybe we only want that data to be privately stored on the backend - it's as easy as not including it in your schema.

We define our schema, passing in ma.SQLAlchemySchema as an argument - this tells Marshmallow that it should inherit from a SQLAlchemy model. The User_Schema then defines a class instance Meta that is linked to our User model. This is used to associate the schema with the model. We then define all of the data we want included in the JSON response. ma.auto_field() is a quick and easy way to define the data types of each attribute - it allows Marshmallow to automatically infer the field type based on the data type of the attribute in the schema. You'll notice for the library attribute, we are using a different attribute definition ma.Pluck. We'll get into this soon, don't worry!!

Below the schema we have defined two variables, each of which has a different use case for the schema instance. The singular_user_schema is used any time we want the response to be for a singular user. Alternatively, the multiple_user_schema is used whenever we need to return multiple users in our response - this is accomplished by passing many=true to our schema instance. My Game_Schema is very similar:

The Association Schema

Now to the fun part!! I know you are pretty curious about that ma.Pluck attribute definition and this is where that comes into play. Below is our User_Library_Schema:

This schema looks relatively simple. You'll notice one small difference though: the game attribute is defined with ma.Nested(singular_game_schema). This tells Marshmallow to go find our game schema, and nest that schema into our user library schema. If you recall, the UserLibrary model is a join table that specifically houses a game and a user - this is the schema that helps facilitate the relationship between the two. When we pull in data for each user's library, we want all of their games nested into a nicely packaged UserLibrary record on our backend.

Now going back to our User model and our User_Schema. In our User model, we established a bi-directional relationship with the UserLibrary model through the library attribute. Each user will have multiple library entries on our backend. library = ma.Pluck("User_Library_Schema", 'game', many=True) takes our library attribute, hops over to our User_Library_schema and "plucks" the game objects out of it for the associated user. It then nests those games inside of the library attribute that we are sending back with our user JSON data to the frontend. Here's a visual representation of what that response might look like:

As you can see, the serialization of the user data gets sent back a library that is an array containing all of the game objects associated with our user. Pretty dang cool if you ask me!!

Conclusion

Phew! This has been a long blog post, and I hope you've made it this far! Flask-Marshmallow is a really powerful tool that gives us a lot more control over our data serialization, and makes it a lot more intuitive and easier to understand when we are in the thick of creating a complex database structure. This honestly saved my life when I was working on my most recent project. I was so lost in complex serialization rules, I almost lost track of which rule needed to be defined where. I honestly highly advise everyone to check this tool out if you haven't already - I promise you it makes creating a Flask-SQLAlchemy backend a lot easier. Out with those pesky serialization rules!! I'm going to include my full repo for the related project below - please feel free to check it out, as I have a LOT more schema's than the one's I used as examples here. Happy Coding y'all!

GitHub Repo: https://github.com/BryTheWiseGuy/re-flex-games-app

A Quick Guide: Creating Join Tables with SQLAlchemy

Bry — Sun, 27 Aug 2023 01:46:17 +0000

I recently created a CLI using Python and SQLAlchemy that required the use of a join table. For those of you that have experience on this topic, creating a normal model with SQLAlchemy is a pretty simple task. However, when you start to join those models in many-to-many relationships things can get complex pretty quickly. Implementing foreign keys tied back to all your original models, and then interacting with the join table in the database can quickly lead to many confusing error messages if not set up correctly. During my experience creating a CLI, this was by far one of the more frustrating and confusing tasks. I find writing Python functions to be pretty straight-forward in comparison. In this blog post, I am going to provide a quick run-down of how to create a simple join table using SQLAlchemy and explain the logistics behind it.

Getting Started

Before getting started with creating models, there are a few imports we will need to ensure we can format our models the way we want and define what data a table record should have.

Your sqlalchemy imports may look different depending on the needs of your model, but relationship and declarative_base are necessities to establish base models and table relationships. SQLAlchemy's declarative_base has some very powerful features that simplify the object relational mapping necessary for any database framework. The declarative base serves as a base class for database models, and combines table definitions and class definitions. It simplifies class-table mapping, provides access to database queries, and integrates sessions to perform CRUD operations on our database.

Building Base Models

Building the base models is a relatively simple task, as they look a lot like vanilla Python classes. The following are the models I created:

Table names are defined using the SQLAlchemy attribute __tablename__ accessible through Base. We then can define all of our columns for the database table. This also serves as a model for the creation of class instances, which will inherit attributes from the Base. We lastly define a magic method __repr__ (representation), that formats instances of created classes into human readable strings. This is extremely helpful when debugging code with ipdb or in a situation where you need to print() an instance of a class to the console for any reason.

Building the `user_library` Join Table

Building the join table is quite a bit different from creating simple models. As the join table will serve as an "in between" for our many-to-many relationships between the users and games table, we will need to implement the use of foreign keys. This is how I have modeled my join table:

In my join table, I have defined foreign keys as user_id linking back to the users table, and game_id linking back to the games table. We then need to establish a relationship between a User class instance and a Game class instance through our join table. We do this by using the relationship() function built into sqlalchemy.orm. We define user as a relationship to a User class instance that back populates to the user_library table. The back_populates argument is used to establish a bidirectional relationship between a User and user_library. We do the same exact thing for the Game class instance relationship.

Defining Relationships to `user_library`

The last step to establishing our many-to-many relationship join table is defining a user_library attribute in both our Game and User models. It is very important to pay attention to syntax here, as defining these relationships incorrectly can lead to unexpected bugs or interactions with your database. This is how I have updated my models:

Because we are linking foreign keys for both Game and User instances, we need to define a user_library connection in both models. It's important that the name definition for the class attribute matches the name of the join table. In my example I defined my class attribute as user_library which is the same as the connecting join table. Looking at the User model as the example, we use the relationship function to establish a relationship to instances of User_library and then use back_populates to establish a bidirectional relationship to the user attribute we defined in the User_library model. I've drawn arrows in the below image to more clearly exhibit the relationships we established.

Conclusion

That is a basic tutorial on how to build a join table and establish table relationships. Trust me, this process can get extremely complex when working with more than 3-4 tables and/or multiple join tables. I created multiple Entity Relationship Diagrams during the process of creating my CLI that looked like jumbled up spaghetti, but it was extremely rewarding once I figured it out. Hopefully I've been able to help guide you through the basics of the process and help explain the why's behind it all. I'll include a link to my GitHub repo for the project that inspired this tutorial below. Happy coding everyone!

Vapor Game Store CLI Repo

React.js State: Dynamically Controlling Components

Bry — Sat, 01 Jul 2023 23:24:48 +0000

React is a popular JavaScript library for building user interfaces. Originally created by Facebook, React is known for its declarative approach towards rendering components. The dynamic nature of applications requires a way to manage changes over time. In walks React State, one of the core concepts of React. Really understanding state and its purpose can drastically change how developers build effective, efficient, and interactive UIs. Similar to my previous experience with JavaScript context, I had a really tough time nailing .this down (see what I did there?). This blog post will give a detailed breakdown of the purpose of state, why we use it, and how we use it.

What is React State? Why Do We `UseState()`?

"state" is an object that holds data which may change over the lifetime of a component. It allows components to create, modify, and delete properties that are internal to them, which in turn leads to dynamic changes in the rendered output. While React props allow external data passage from a parent to a child component, they don't actually change the components internal data.

State represents data that can change and affect the component's behavior, therefore causing a re-render. However, unlike the DOM's state, the React state is maintained within the React ecosystem, ensuring a smoother and more efficient rendering process.

Let's take an input field in a form as an example. As a user types text into an input field, we want a way to track what is being input while it is being filled out. State allows us to track that data, and even control what the user is allowed to input. Say we only want the user to be able to input 50 characters, or only be able to input a URL: State allows us to track how many characters are in the field, or require a field to include 'https://' before the form is able to be submitted. It can even be used to prompt an error message if the user attempt to submit the form outside of the guidelines we set in state.

Without state, React components would be static, which isn't ideal for most applications that need to respond to user inputs. Other examples for state include a toggle button’s on/off state and data fetched from an API - both represent various states of an application.

How do we `useState()`?

Above is a simple use of React State. React state is imported with the hook useState from React. Our component then declares a state by de-structuring useState() into a state variable and a setState() function. The setState() function will allow us to set the state later on. We than set the state of the count variable with useState(), setting it to '0'.

Returned in our JSX, we have a button with an onClick event that sets the state of count to whatever it's current state is + 1. Once the user clicks the button, the component is re-rendered and that state of the count variable is changed to 1. It's important to keep in mind that this happens asynchronously. If you were to console.log count immediately after you set it's state, it's not going to reflect that state until after the component is re-rendered.

Conclusion: How Are State and Context Related?

I like to think of state as a personal diary of a component. It's private, it changes over time, and it influences the behavior and mood of the component. Similar to how context in JavaScript sets the scope and gives us access to .this, React state gives components the ability to create and manage their own context or data scope.

React State is a very powerful feature that makes React a stand-out library for building user interfaces. I encourage everyone to get into a React project and play around with state hands-on to really understand its functionality. As a beginner, I was eventually able to nail this concept down in my most recent project, and you can too! Never be afraid to experiment and try news things, and as always, happy coding!

Context in JavaScript: What is .this?

Bry — Sun, 14 May 2023 22:38:31 +0000

Learning Code is Like Doing a Puzzle

For the past 12 weeks, I've started to embark on my journey into learning how to code in JavaScript and HTML. It's been a wild journey to making my first web application, one that I can only compare to completing a jigsaw puzzle. You see, completing a jigsaw puzzle requires not only having all the pieces, but figuring out how to put them together and knowing what the big picture looks like. Sometimes it takes a lot of time and can be extremely frustrating when your trying to find that one piece, but the end result is rewarding. Coding is the same way: understanding all of the pieces, putting them all together, and realizing the big picture is all integral into developing an application. I can say without a doubt that the one puzzle piece I still struggle with as a new developer, is the concept of context. It's the one piece of the puzzle I had to ask multiple questions: What is this, why is this, where is this, when is this?

What is Context in JavaScript?

In technical terms, context refers to the object to which a function belongs or is bound. It determines how the function is executed and how it can access variables, properties, and methods within its scope. The confusing part, however, is that context changes dynamically depending on when and how it is used.

There are two main types of context in JavaScript: Global and Function context. The global context is the default context in JavaScript. It represents the context of the entire program. This is definitely the most simplified state of context: When you define a function, object, or variable in the global context, it can be accessed anywhere in the program.

Functional context on the other hand, refers to the context within a specific function. Every function created in a program has its own internal context, with direct access to the global context. Where this can get really confusing, is when you have functions nested inside of other functions, or used as methods on objects.

In comes the concept of the keyword this.

The Big 4

The this keyword in JavaScript provides a reference to the current context that can allow a function to access and manipulate the methods and properties of the context object. This changes dynamically: where the function is invoked matters, and where the this keyword is used matters.

I like to think of context like an everyday office building: this person works at this office building, on this floor, in this suite, in this cubicle. The value of this depends on where you use it and what you are referring to.

There are 4 main ways the value of this can be determined:

Function Invocation: When a function is defined as a standalone function without any specified context, this refers to the global context. Here's an example:

We define the name, John, as a variable in the global context. Inside the greet() function, we can access that name via dot notation with the this keyword. To go back to the office analogy, think of the 'greet()` function as the office building, and our name variable as a specific person in a pool of people that work there (in the global scope). What if you want to go further, and access the value within an object key?

Method Invocation: When we call a function as a method on an object, the context of that function now refers to the object that owns the method. The context of this is now implicitly set to the specific object:

Here, the context of this never leaves the object; this will always refer to the object keys available within the object itself when called inside the greet() method. If the office is the global scope (everything outside of the object) and the object is the suite, then the object key become the cubicles, and the value becomes the person in that cubicle, in this case 'Alice'. What if we want to add a new suite altogether, with new cubicles for new people?

Constructor Invocation: Constructor functions are probably one of the coolest things in coding, and are one of the more digestible ways to understand the concept of context. When a function is used as a constructor with the new keyword, this refers to the newly created instance of the object. The context of this is automatically set to the newly created object.

In this example, the person() constructor function is being used to create entirely new objects, where this has context within each new object created; the context never overlaps between objects and is specific to the object being created. We utilize the new keyword to create a new person, wherein this references the creation of the name key/value pairing. You could even create more than just a name: this.age or this.height. Moving away from the office analogy, think of this one in terms of the details of individual people, and how the value of name, age, and height would change depending on the context of who you are referring to.

There is one last main method of invocation called explicit binding, and for the sake of the length of this blog post, I'm going to save that for another time. But you can imagine how utilizing this can be a very powerful tool. Although it can be confusing, it's all about thinking about what scope you are in, and tracing this back to it's reference. Sometimes working backwards can be beneficial.

Conclusion: The Power of .this

Understanding context can be very beneficial to writing effective and DRY JavaScript code. It reduces the need for a lot of repetition in your code and, for a newbie like myself, can really help you to understand how functions interact with objects. I recommend starting small with context, and slowly building bigger with experience. While context isn't completely necessary in writing code, and can make things a lot more confusing if not fully grasped, it can give you greater control over your code's behavior and provide some flexibility. Remember that context changes dynamically, and it is essential to consider the context in which a function operates when attempting to work this into your code.

Now get out there and try something new, and remember to never give up! Practice makes perfect, and that could never be more true than in developing skills in coding.

DEV Community: Bry

Using Flask-Marshmallow for easy JSON Serialization

In Comes Flask-Marshmallow!!

Getting Started

The Models

The Schema's

The Association Schema

Conclusion

A Quick Guide: Creating Join Tables with SQLAlchemy

Getting Started

Building Base Models

Building the user_library Join Table

Defining Relationships to user_library

Conclusion

React.js State: Dynamically Controlling Components

What is React State? Why Do We UseState()?

How do we useState()?

Conclusion: How Are State and Context Related?

Context in JavaScript: What is .this?

Learning Code is Like Doing a Puzzle

What is Context in JavaScript?

The Big 4

Conclusion: The Power of .this

Building the `user_library` Join Table

Defining Relationships to `user_library`

What is React State? Why Do We `UseState()`?

How do we `useState()`?