DEV Community: Cristian Alaniz

Flask-Marshmallow vs. SQLAlchemy's SerializerMixin: Which One Should You Use?

Cristian Alaniz — Thu, 30 Jan 2025 19:38:03 +0000

When working with Flask and SQLAlchemy, serialization plays a crucial role in transforming database objects into JSON-friendly formats. Two popular approaches for handling this in Flask applications are Flask-Marshmallow and SQLAlchemy’s SerializerMixin. Each has its own strengths, so let’s break down how they compare.

SQLAlchemy’s SerializerMixin: A Quick and Easy Approach

SQLAlchemy’s SerializerMixin is a convenient way to quickly add serialization capabilities to your models. By making your SQLAlchemy model inherit from SerializerMixin, you get the ability to easily convert objects to dictionaries and JSON.

Example Usage:

from flask_sqlalchemy import SQLAlchemy
from sqlalchemy_serializer import SerializerMixin

# Initialize SQLAlchemy
db = SQLAlchemy()

# Model definition
class User(db.Model, SerializerMixin):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)

# Create an instance and serialize it
user = User(id=1, username='johndoe', email='johndoe@example.com')
print(user.to_dict())

Pros:

Minimal Setup: Just mix it into your model, and you’re good to go.
Automatic Field Inclusion: Includes all model fields in serialization by default, including any model relationships.
Works Well for Simple Use Cases: Ideal when you just need a quick way to serialize models without additional customization.

Cons:

Limited Customization: Fine-tuning field output (e.g., excluding fields, formatting data) requires extra work.
Tightly Coupled to the Model: Since serialization logic is within the model itself, it can be less flexible when you need different output structures for different use cases.
Potential Overexposure of Data: Since all fields are serialized by default, you might unintentionally expose sensitive data.

Flask-Marshmallow: A More Flexible and Structured Approach

Marshmallow, especially when used with Flask-Marshmallow, provides a more structured and explicit way to serialize and validate data. It separates serialization logic from the SQLAlchemy models, giving more control over how data is presented.

Example Usage:

from flask_marshmallow import Marshmallow
from flask_sqlalchemy import SQLAlchemy

# Initialize SQLAlchemy and Marshmallow
db = SQLAlchemy()
ma = Marshmallow()

# Model definition
class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)

# Model Serialization Schema definition
class UserSchema(ma.SQLAlchemyAutoSchema):
    class Meta:
        model = User
        fields = ("id", "username")  # Only serialize these fields

# Create an instance and serialize it
user = User(id=1, username='johndoe', email='johndoe@example.com')
schema = UserSchema()
print(schema.dump(user))

Pros:

Explicit Field Control: You define exactly which fields to include, exclude, or modify.
Data Validation: Supports validation rules to ensure data integrity.
Customization & Nesting: Easily customize field output and nest related objects.
Separation of Concerns: Keeps serialization logic separate from the database model, making code more maintainable and reusable.

Cons:

More Boilerplate Code: Requires defining schema classes separately from models.
Additional Learning Curve: If you’re new to Marshmallow, understanding its concepts may take some time.
Extra Dependency: You need to install and maintain an additional library.

Which One Should You Choose?

If you want a quick and simple way to serialize models without much customization, SerializerMixin is a great choice.

If you need fine-grained control, validation, and a more maintainable approach, Flask-Marshmallow is the better option.

For small projects or internal tools, SerializerMixin might be sufficient. However, for larger applications with complex data requirements, Flask-Marshmallow is often the more scalable and maintainable choice.

If you wish to learn more about either one, check out these links:
SerializerMixin
Marshmallow
Flask-Marshmallow

Confused about other topics in the article?
What is Serialization?
What is Flask?
What is SQLAlchemy?

Flask Routes vs Flask-RESTful Routes

Cristian Alaniz — Tue, 07 Jan 2025 07:45:12 +0000

You probably have experience with basic flask routes if you are reading this. Perhaps you are new to the idea of routes and are curious about the differences and similarities.

In this article i'd like to compare flask routes and flask-restful routes on a syntactical level.

What are Routes?

Routes are made up of 3 key components:

URL Path
Server Resource
HTTP Methods

They are used as communication channels between a client and a server.

URL Path

In both regular flask routes and restful routes the URL path is the specific address on the server that the client requests. An example could be '/home'.

The difference lies in how they are defined.

Flask Routes

Defining a URL path in a flask route using the home example would look like this:

@app.route('/home')

The actual URL path is passed an argument to the route method.

The decorator is used to bind a function (which is declared under this line and will be discussed shortly) to the URL path.

Flask-RESTful Routes

Defining a URL path via a restful route would look like:

api.add_resource(Home, '/home')

The URL path is passed as the second argument to the add_resource method.

The first argument is the server resource associated with the URL path.

Server Resource

This is where the magic happens. The logic and actions are defined here. Each resource receives a request and returns the appropriate response.

The key difference lies in the way flask and flask-restful think about the server resource.

Flask Routes

With a regular flask route, the "server resource" is a function.

def home():
    return "Welcome to the homepage!"

Flask-RESTful Routes

Flask-RESTful takes a class-based approach to defining a "server resource". The class inherits from the RESTful class Resource.

class Home(Resource):
    def get(self):
        return "Welcome to the homepage!"

HTTP Methods

Last but not least, both flask routes and restful routes take HTTP methods. These methods help to further specify a clients request, ensuring the request is handled by the correct server resource.

Once more, the route types differ in how they define HTTP methods.

Flask Routes

Flask routes takes the approach of defining HTTP methods in the same space where it defines the URL Path.

@app.route('/home', methods=['GET'])

Flask-RESTful Routes

Flask-RESTful takes the approach of defining each HTTP method as a method of the server resource class.

def get(self):

You may have caught this in the server resource example.

All Together

Flask Route Example

@app.route('/home', methods=['GET'])
def home():
    return "Welcome to the homepage!"

Flask-RESTful Route Example

class Home(Resource):
    def get(self):
        return "Welcome to the homepage!"

api.add_resource(Home, '/home')

Conclusion

Flask routes and Flask-RESTful routes are both viable options to establish communication between a client and a server.

Beware as there are still a lot of differences we didn't cover. One big difference is that regular flask routes do not follow REST principles but can be made to follow them unlike their counterpart that naturally do. Other differences include regular Flask compared to Flask-RESTful and configuration, among other things.

Check out these articles to dive deeper into the differences:
What is an API
What RESTful Actually Means
Setting up Flask
Setting up Flask-RESTful
HTTP methods

Regular Expressions

Cristian Alaniz — Thu, 10 Oct 2024 09:21:56 +0000

Picture this, you are attempting to sign up for a website, you enter your email and password and you get the message "The username or password you entered is invalid. Please try again."

How exactly does the computer know the username or password you input is invalid? The answer is a super powerful tool called regular expression.

What is a Regular Expression?

A regular expression, or regex for short, is a pattern that is used to match all types of characters in a text. The beauty of a regular expression is that you can design it to search for anything you want.

How RegEx Patterns Work

RegEx patterns can be as simple as searching for character(s) in a text, with an exact full match. For example the pattern:

password

Would match with the literal text "password". This particular pattern is case sensitive so the text "Password" would not match since the p is capitalized.

Complex RegEx Patterns

Most websites require your password to meet these requirements:

Must contain a lowercase letter
Must contain a capital letter
Must contain a digit
Must contain a non-word character
Must be at least 8 characters long

How would we go about making a pattern that searches for these requirements? The key lies in regex metacharacters. Metacharacters are pre-defined shorthands to match a type of character.

Meeting The Requirements

The metacharacter we can use to pass the first requirement is:

[a-z]

The brackets are used to tell the computer where the range starts and ends. a-z is used to search for lowercase letters in the a-z range.

[A-Z]

Similar to a-z, A-Z searches for any capitalized letters. Passing the second requirement.

\d

This metacharacter passes the third requirement, it tells the computer to search and match with any digit.

\W

This metacharacter can be used to pass the fourth argument because it matches any non-word character. Word characters include any letter capitalized or not, any digit, and an underscore.

{8,}

The curly brackets are special characters that tell the computer to match whatever came before it x amount of times. If a comma is included inside the brackets it changes to match whatever came before at least x amount of times. If a second number is put after the comma it will the preceded pattern a maximum of y times. If no number is put after the comma, the computer interprets it as an infinite amount.

Putting It All Together

With the help of some additional metacharacters:

^ Used to indicate the beginning of a text
$ Used to indicate the end of a text
() Used to group expressions
(?=) Used to lookahead in a text
. Matches any character
* Matches the previous token between 0 and unlimited times

We can now put our password regex pattern together. The final result will look like this.

^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*\W).{8,}$

Conclusion

At this point you probably realized just how powerful regular expressions can be. This is just the tip of the iceberg. They can be used to validate input, match text, search and replace text, amongst other things.

If this article peaked your interest, I recommend you check out some of the links below.

To learn more about regular expressions check out these articles:
Regular Expressions
Python Regular Expressions-Google Education
To experiment writing your own regular expressions visit regex101

Wallpaper source

Vanilla JS vs REACT JS

Cristian Alaniz — Wed, 20 Mar 2024 03:59:43 +0000

If you're reading this, you are probably familiar with Vanilla JavaScript. You use no outside resources, just plain old JavaScript along with HTML and CSS to get the job done. What if I told you there was a different way to get the job done while using JS principles? Well there is, it's called REACT. REACT is a library that is an extension of JavaScript. There are many differences between the two but I would like like to focus on 3 for the rest of the article.

Functions vs Components
Parameters/Arguments vs Props
What they Return

Functions VS Components

How do we declare a function in JavaScript? It's pretty simple.

function example(exampleParameter) {
  //example code
  return exampleParameter
}

Function Example

There a few parts to this declaration. We use the string "function" to tell the program that we are about to declare a function. Next is the function name "example". After that comes "(exampleParameter)" syntax to declare any parameters the function may have. Lastly we have the code block inside the curly brackets "{}" with a return statement.

How does this differ from a REACT component?

A REACT component has a very similar structure to a function. The main differences being that a component name is Capitalized, takes in props instead of arguments, and it returns JSX. The name is Capitalized so that the engine can tell the difference between a function and component.

function ExampleComponent({ props }) {
  return (
    <p>{props.variable1}, {props.variable2}</p>
  )
}

export default ExampleComponent;

Component Example

Parameters/Arguments vs Props

You might have noticed in the Component Example that where a function declares parameters, a component declares a props variable.

So how are they similar? They are similar in the sense that they both allocate a space where data can be passed in.

Their difference lies in the way they are passed in. With Vanilla JS you simply have to call the function and pass in the arguments. With a REACT component, the approach is different.

//App.js
import ExampleComponent from "./ExampleComponent"

function App() {
  const variable1 = "Hello";
  const variable2 = 7;

  return (
    <ExampleComponent props={variable1, variable2} />
  )

Passing Props To Component

In the example above we are passing variables into a props object. This object will hold all the props we are trying to pass to ExampleComponent component.

Now how do we get access to these props inside the ExampleComponent component? The answer lies in an earlier example:

function ExampleComponent({ props })

The component allocates space for props inside the parenthesis, which are also enclosed in curly brackets for destructuring purposes. Keep in mind that the name of the passed in prop(s) (Passing Props To Component) has to be identical to the declared prop(s) (Component Example).

Return

Another thing you might have noticed comparing the function and component example is the fact that they return different things. A function can return a lot of things, but to sum it all up, it returns a value. A component on the other hand returns JSX.

What's JSX?

JSX or JavaScript XML is an extension of JavaScript that allows you to write HTML like code. This code can be written directly into JavaScript, where it is translated back into Vanilla JavaScript by a tool like Babel before being executed.

A couple things to know about JSX:

It allows you to mix JS expressions with JSX
All JSX code must be engulfed by a some opening and closing tag

In the Component Example we have an example of both these!

<p>{props.variable1}, {props.variable2}</p>

The p tags at the beginning and end of the code are examples of opening and closing tags. It's done this way to allow the JS engine to clearly and easily organize all the JSX when it comes times to bring it all together.

Inside of the tags are two examples JS expressions being mixed with JSX. {props.variable1}, {props.variable2} are JS expressions holding a value. This value is then plugged into the JSX output and Voila. All thanks to curly brackets that allow this mix to happen.

Conclusion

There are a lot of other differences between the two. For instance what's up with "import" and "export default"?! Why is ComponentExample able to be returned in App.js? There are a lot of mysteries left to unravel but one thing is for sure, REACT can be a powerful tool. If you're interested in finding out more, I recommend you check out one of the links.

Importing and Exporting Components
Free React Course
REACT Website

What Makes Up a Website?

Cristian Alaniz — Fri, 19 Jan 2024 05:45:43 +0000

You probably navigate the internet everyday without thinking about it. Visiting different websites, clicking on many links, etc. Have you ever stopped and asked yourself, what makes up a website?

To explain what makes up a website in simple terms, I will use a car analogy going forward. Try and keep up!

What Is Needed To Make A Website?

To make a website is surprisingly simple, all you need are the following:

Structure (HTML)
Functionality (JavaScript)
Style (CSS)

HyperText Markup Language (HTML)

A car needs a frame, chassis, axels, pedals, steering wheel etc. All of these put together make up the cars structure. Similarly, a websites structure is an HTML document.

<!DOCTYPE html>
<html>
  <head>
    <!-- head HTML -->
  </head>
  <body>
    <!-- body HTML -->
  </body>
</html>

What do these tags mean? The "!DOCTYPE" tag states the type of document. In this case, it's an HTML.

Next in line is the "html" tag. This tag, like most HTML tags, has an opening and closing tag. The closing tag syntax is the same as the opening syntax except it has a "/", signifying a closing tag. It's purpose is to act as a container for all other tags inside the document.

The "head" tag contains machine readable information. Examples of this would be the title, script(s), or style sheet(s). All contents inside this tag cannot be seen when you load a website.

Last but certainly not least we have the "body" tag. This tag contains all of the content that you see when you load up a website. You can add all sorts of things inside of it such as images, text, shapes, this is your canvass.

Functionality (JavaScript)

Once you have the cars structure, it's time to make things have functionality. For example, when the steering wheel is turned left, make the steering axel turn to the left. When the horn is pressed, make a noise!

What if we wanted to make a header change colors when the mouse cursor overlooks it and revert to its original color when the mouse cursor is off the header?

html:
<body>
  <h1>Header</h1>
</body>

JavaScript:
const h1 = document.querySelector("h1");

We start off assigning the header to a h1 variable.

Now we can add a "mouseover" event to the selected header.

h1.addEventListener("mouseover", () => h1.style.color = "red");

Using .addEventListener to do so, we have successfully turned the header red. .addEventListener takes in two arguments, an event, in this case "mouseover", and a callback function.

We still need to revert the color back to it's original color when the mouse is not on the header.

h1.addEventListener("mouseout", () => h1.style.color = "white");

Similar to the previous code, we have successfully turned the header back to its original color (white) when the mouse is not over the header using the "mouseout" event.

Cascadia Style Sheets (CSS)

Now that we have a fully functional car with structure, we can customize it any way we want. You can add stickers to it, give it a spoiler, add unique headlights, and make it any color you desire! This is where CSS comes in, allowing you to style your website anyway you want.

There are 3 ways to assign style to an element. The first and most broad way to do it is by using the tag name. Any style assigned to this tag name will apply to all tags with the same name.

HTML:
<div>
  <h1>Header 1</h1>
  <h1 class="with-border">Header 2</h1>
  <h1 class="with-border" id="red">Header 3</h1>
</div>

CSS:
h1 {
font-size: 50px;
}

This CSS syntax sets the font size of all h1 elements to 50px.

The next option goes one layer deeper, only applying the style to the HTML tags with the same class name (i.e. "with-border"). Notice that the "with-border" has a period (.), signifying that it is a class name.

CSS:
.with-border {
border: 1px solid white;
height: fit-content;
width: fit-content;
}

The "border" style takes in a number value that sets the border's thickness as well as a color. In this case the border's thickness is 1px. Both the "height" and "width" are set to fit-content, allowing the border to be snug against the element.

The final option is the most accurate due to the id value being unique to that element (i.e. "red"). The id name has a # before it, signaling an id.

CSS:
#red {
color: red;
}

Thus setting the element's color to red.

The Big Takeaway

Who knew a car and a website could be so similar? HTML, JavaScript, and CSS are very powerful tools used to make all sorts of websites with different purposes. These languages make up what is known as Front End Development. To put it shortly, you develop the part that people will see when they go to a websites URL.

There is a whole other side of the coin called Back End Development. This is the side that you don't see but is equally as important. If you are curious about how they work together, check out the blog below!

Want to learn more about the differences? Check out this blog: Front End vs Back End Development

GIF sources:
Cover Image
Lightning McQueen