DEV Community: Sydney Andre

React's useReducer Hook

Sydney Andre — Mon, 03 Jun 2024 19:32:33 +0000

I am working on creating a customer intake form for a local bicycle repair shop. The form includes sections where the customer can input their contact information, details about the bike, and check off which services they need to schedule.

The primary goal is to ensure all of the components I create are as reusable and customizable as possible. In this post I will explain how I set up this form so that there is no need to make any changes to the components if a question on the form needs to be updated or added. The only aspect that will need to be updated is the data imported into the components.

While planning, I determined the contact and bike information would need text inputs, and the services would need checkbox inputs. Because the checkbox input would produce a boolean value and the text would produce a string, their event handling functionality would be different, so I planned to create a component for each input type.

I realized there would be many state changes occurring through events in the child components, but I needed state to be managed at the parent most component. At first, I was not exactly sure how to handle this, but after some research I found the React hook, useReducer.

This hook allows you to add a reducer function to your component which helps to consolidate the state update logic outside of your component in a single function. Just like when initializing useState, you would call the hook at the top level of your parent component. In this example, that is Form.jsx. useReducer takes in 2 parameters: a reducer function and the initial state of the component. It returns the updated state and a dispatch function that uses the reducer to make updates to the state.

export const Parent = () => {
const [state, dispatch] = useReducer(reducer, initialState)
...
}

useReducer Arguments

Let’s look a little closer at what this reducer argument is made up of. The reducer function takes in the current state and an action object. The action object typically has a property named ‘type’ that is used to define the action that is taken on the state. Additionally, the action object can have additional properties. In the example below, it also has a ‘key’ property and a newValue property.

The reducer function is often made up of a switch case that is dependent on the type property on the action object. Based on the type that is being passed in, a defined action is taken on the state. In the example below, if the type is ‘add_text’, then the state is returned with a new value at the key defined by the action object.

The reducer function can be defined within your component or outside and imported in. In this example it is defined as follows:

const reducer = (state, action) => {
   switch(action.type) {
       case 'add_text': {
           return {
               ...state,
               [action.key]: action.newValue
           }
       }
       case 'change_boolean': {
           return {
               ...state,
               [action.key]: !state[action.key]
           }
       }
   }
}

In this example the initial state is an object named allQuestions which is defined outside of the component and imported in. It is in the exact shape the backend expects so that all of the data points can be added to the database on submission.

What useReducer Returns

Now that we understand what arguments need to be passed into the useReducer, let’s look at what the hook returns and how it is used to help manage the state.

useReducer returns the dispatch function which allows you to update state and trigger a rerender. An action object is the only argument that needs to be passed into the dispatch function. This object will include the properties that were used in the reducer function, for example:

dispatch({
       type:'add_text',
       key: someKeyName,
       newValue: someNewValueName
   })

This would be similar to the setState function that is returned when using useState. Also similar to useState, the new state with the appropriate updates made is returned when dispatch is called.

In Action

Now let’s see this in action! First, I defined two event handling functions that wrap the dispatch function. The reason for this is to be able to pass in values to the action object. This is important for reusability. This way I can pass in the state property that needs to be updated, as well as, the new value of that property when the type is ‘add_text’

const handleAddedText = (e, key) => {
   dispatch({
       type:'add_text',
       key: key,
       newValue: e.target.value
   })
}


const handleCheckBoxChange = (key) => {
   dispatch({
       type:'change_boolean',
       key: key
   })
}

These functions are then passed down to TextInputList.jsx and CheckboxInputList.jsx from From.jsx.

To manage the questions that will make up the form, I created an array of objects with the necessary question information for each input. I imported the respective question data arrays into each List component to map through and return the Input component which takes the event handler function passed down originally from Form.jsx, as well as the question data. Let’s look at the CheckboxInputList component for example:


import React from 'react';
import { CheckBoxInput } from './checkboxInput';
import { checkBoxLabels as cbLabelObjArr }  from '../formQuestionData';

export const CheckBoxForm = ({ handleCheckBoxChange }) => {
   return (
       <div>{cbLabelObjArr.map((obj, i) => (
           <CheckBoxInput
               key={i}
               label={obj.label}
               dbName={obj.dbName}
               handleCheckBoxChange={handleCheckBoxChange}
           />
       ))}</div>
   )
}

Now let’s check out how the CheckBoxInput component is set up:

import React from 'react';

export const CheckBoxInput = ({ key, label, dbName, handleCheckBoxChange }) => {

return (
       <div >
           <div>{label}</div>
           <input
               type='checkbox'
               onChange={() => handleCheckBoxChange(dbName)}
           />
       </div>
   )
}

And that's it! Now, we have successfully utilized the useReducer hook to organize event handling across multiple components, and created highly flexible components. Throughout this process I became very familiar and confident in using the useReducer hook and created highly reusable components that will ensure the client has flexibility to update their form as needed.

For more information and details check out React's useReducer documentation.

Introduction to Using Django

Sydney Andre — Wed, 27 Dec 2023 17:47:39 +0000

In this article, I will explain the basics of what Python's Django is, how it is used, and its benefits and pitfalls. As a primarily SERN stack developer, I was interested in exploring Django because of its all encompassing nature. There are a handful of JavaScript libraries and/or frameworks you would need in your stack to make up the functionality offered by Django, but with built in functionality comes trade offs, so let's dive in!

About Django

How it started
Django was built out of necessity by developers at World Online, an online newspaper in Lawrence, Kanasas, in 2003 and released in 2005. Developers, Adrian Holovaty and Simon Willison, created Django (pronounced JANG-oh) because World Online was responsible for building complex web applications on very short, journalism turn arounds. To keep up, they began to extract a generic framework from their previously build applications, and so Django was born.

What it is
Django is an open source, full stack web development framework that follows an Model-View-Template (MVT) Framework. It provides features to build out both front and back end application components, utilizing SQLite for its DBMS and ASGI or WSGI for server options. It promises to make building website faster, safer, more scalable, and more versatile, and touts it is the web framework for perfectionists with deadlines.

The Framework
Its MVT framework confuses many as it appears to be a renamed version of the classic MVC, but Django details the difference explaining that they interpret the “view” to describe which data gets presented to the user, not what how the data is presented, leaving the how as the responsibility of the "template". The "model" functions similarly to what you would expect. It is where data is provided from the database using an ORM that is built into Django. Some may still ask, where the controller fits into the picture, and they explain that the framework itself acts as the controller through the URL configuration.

Now that we have an understanding of the framework's structure, take a look at the below diagram for a visual understanding of how data is passed.

Image source: https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Introduction

Just as in other frameworks, this structure dictates the project and application file make up. A Django directory is made up of an overall project directory with one or more app directories included within the project. They delineate the difference between a project and apps describing apps as web applications that "do something" and projects as the larger container that houses multiple apps. This allows be continued reusability of code by separating functionality.

Benefits and Pitfalls

Python comes with many out of the box features like authentication, database connection, ORM, and database admin interface to name a few. In addition to these features, it is also known for its in-detail documentation and robust community. Because of this, it has gotten a reputation for being a go to choice for beginners and database driven sites, but that does not mean it doesn't come with its own set of downfalls.

Benefits
First, let's explore its benefits. As a developer new to Python development, I can attest to its impressive documentation and ease of use. With only a few commands you can have a simple, full stack application set up in minutes. Along with documentation, its tutorials walk you through step by step creating a basic application. Additionally, database connection is done in seconds with a few commands, and a database administration interface can also be built out in the matter of a a few commands. These benefits are why Django has gained popularity because much of the set up and configuration is abstracted away, leaving the developer more time to work on actual functionality.

Pitfalls
Just as with most things, where there are pros, there are cons. Although Django has a reputation for being quick to set up, its runtime speed can often be a pitfall if your application is not well optimized. Because of the amount resources being accessed in the framework and the application's architecture, sites can run slowly, but this can be accounted for if you have optimization top of mind from the beginning. Additionally, Django is not always the best choice for every project. Because the backbone of the framework is built around different views that are served based on the url configuration, it is not always the best choice for smaller, one-page applications.

In Conclusion

I hope this article provided some context before you begin on your Django journey. Before embarking, map out your the architecture of your site to ensure Django is the best option and that you are developing with optimization in mind. Then, I suggest checking out Django's website for details on how to start a project. As mentioned previously, its documentation and community is one of its best benefits for new developers.

Sources

https://www.djangoproject.com/
https://www.w3schools.com/django/django_intro.php
https://careerfoundry.com/en/blog/web-development/django-framework-guide/

Comparing Java and JavaScript

Sydney Andre — Thu, 07 Dec 2023 15:06:06 +0000

In this article, we will explore the similarities and differences between Java and JavaScript. As a software developer, I learned JavaScript first and have recently begun digging into Java concepts. This article will explain some history about each language, the key differences between them, and provide code snippets for some Java basics.

About the Languages

Both Java and JavaScript are object oriented programming languages that utilize C-style syntax. Both were developed in the 1990s; James Gosling began creating Java in 1991 and Brenden Eich invented what is known today as JavaScript in 1995. The first version of each was released in 1996. At their conceptions, Java was primarily used for back-end development and JavaScript for front-end. As they have evolved over the last few decades, the uses for both have expanded. Java now is primarily used in Android mobile application development, but still continues to be used for server applications, as well as software and web development. Similarly, JavaScript's uses have continued to grow allowing developers to create full applications with JavaScript and its related frameworks.

Key Feature Differences

Now that we have reviewed some of their similarities, let's look at a few differences. One of the most significant differences between the languages is how the machine runs the code. Java is a compiled, then interpreted language; whereas, JavaScript is just interpreted. Java code is run through a compiler that creates bytecode that is then interpreted by the Java Virtual Machine. This allows Java much more portability than other compiled languages whose generated machine code is platform-specific. Because of this, Java often gets the tagline "write once, run anywhere". Java gets the best of both worlds--speed of a compiled language with the flexibility of an interpreted language. Interpreted languages run code by reading each line one by one then translating to machine code. When interpreted languages first came out, they were much slower than compiled languages, but as they have evolved performance gap between the two has shrunk.

Another difference is that Java is multi-threaded and JavaScript is single-threaded. This means Java can execute multiple tasks simultaneously; whereas, JavaScript can only run one line of code at a time. This sounds like a big downfall for JavaScript, but by utilizing asynchronous techniques, its performance is not hindered as much as it may seem.

Lastly, Java is class-based and JavaScript is prototype based. This refers to an inheritance style in object-oriented programming. In JavaScript objects do not need to be defined in a class to inherit properties of another object as they can inherit from the prototype property. On the other hand, object inheritance in Java, occurs when an object created in a class.

Beginner Java Concepts

Next we are going to walk through some basic Java concepts. First, when setting up a Java file, you will need to define the package which refers to the directory. All other code must be wrapped inside of a class and the name of the class must match the file name.

package JavaExample;

public class Tutorial {
   //start writing in Java

}

Other basics in Java feel similar to JavaScript such as operators, string and array methods like .length() and accessing elements in arrays and strings with bracket notation. Variable declaration is a bit different as they are declared and defined with keywords that indicate their datatype. Lets look at some examples in our Tutorial class.

package JavaExample;

public class Tutorial {
    //primitive variables
    int myNumber = 0;
    char myChar = 's';
    boolean myBoolean = true;

    //non-primitive variables
    String myString = "Java is Fun!";
    int[] myArray = {5, 3, 6, 8};
}

Methods, or functions as you may know them from JavaScript, are also defined with some additional keywords that indicate how they can be accessed and what datatype it is expected to return. Methods declared with the keyword static can be accessed without creating an object of the class but cannot be accessed in other classes. Those declared with public can be accessed in other classes but must be accessed by objects of the class. If the method is not returning a value, you will use the keyword void after static or public, but if it is returning a value, you will use the datatype keyword.

package JavaExample;

public class Tutorial {

//static method returning an integer
  static int arraySum(int[] args){
    /* creating an object from the class 
    to access variable from above */
    Tutorial myVar = new Tutorial();

    //for loop shorthand
    for(int i : args){
            myVar.myNumber += i;
        }
        return myVar.myNumber;
   }

//public method not returning a value
   public void printMe(String words){
    //print to the console
    System.out.println(words);
}

Lastly, we will take a look at Java's main method. This is a built in method that is used to the project's code. All Java projects must use the main method at least once. Best practices dictates there should be one file responsible for running the Java code and the other classes will define the functionalities. In this example we will see the difference in how public vs. static methods are invoked.

package JavaExample;

public class Tutorial {
    public static void main(String[] args)
    {
        //access public method by creating an object
        Tutorial myObj = new Tutorial();

        //Public method invocation
        int addedNumber = arraySum(myObj.myArray);
        System.out.println(addedNumber);

        //Static method invocation
        myObj.printMe("hey! learning is fun!");
    }

}

Conclusion

Many say that starting the JavaScript for fresh beginners is a good idea as it is a more straightforward language with less 'magic' happening in the background, so as a new JavaScript developer, I was interested to see how easily or difficult understanding Java concepts would be. Although, I have not fully dug into all of its complexities, the learning curve of understanding these basic Java concepts was much flatter than starting off fresh with JavaScript.

I hope this article helps you in your coding journey!

Introduction to Data Analysis with Python

Sydney Andre — Wed, 22 Nov 2023 14:45:33 +0000

In the world of big business, decisions are rarely left to someone's gut feeling. When making plans for the future, most business owners and executives want evidence to inform their decision. This is were data analysis comes into the picture. In this article we will examine at a high-level what the process of analyzing data looks like and explore how Python libraries like NumPy, Pandas, and Matplotlib enable us to follow this process.

What is Data Analysis?

It is the process of transforming and organizing collected data to provide insights on its relationships and patterns. Professionals can then make informed decisions based on evidence from the data. Data analysis is a tool to aid professionals in their decision making but should not be the only factor involved. Just as important as discovering the patterns and relationships the data reveals is interrogating the data's limitations. When handling a large amount of data, it is important to follow a process to maintain focus on the primary purpose of the analysis.

Data Analysis includes the following steps:
1. Ask/Specify Data Requirements
In this step we ask ourselves or the intended audience (stakeholders, supervisor, etc.) What is the question we are trying to answer through analyzing this data set? What problem are we solving for or upcoming event are we planning for? This allows you to maintain focus and provides a scope for your analysis. If we are trying to forecast how much of product X we should order for November, we probably are not very concerned with the sales of product Y in July.

2. Prepare or Collect Data
Here, the questions are How are we currently collecting data? Does this include the data points I need to answer the questions in the scope of this analysis? If not, what are those gaps and how can we fill them? These questions allow us to take stock of the information we have at our disposal and if that will be enough to meet the needs of our scope. If not, we will need to add additional steps to get the information we need, but knowing this early on can help avoid future headaches.

3. Clean and Process Data
In this step we are thinking about how the data needs to be organized to best meet our needs. Asking ourself, Are there any potential errors, corruptions, or duplications that could skew or misrepresent data? If so, how to we account for these and clean them? How do we store this data so it is easily accessible and manageable? Something to keep in mind is your analysis is only as good as your raw data, so you must be aware of the integrity of your data to ensure the integrity of your findings.

4. Analyze
Now for the fun part! Here is where you will be looking for those relationships and patterns we were talking about earlier. What is the data showing you? Where are there meaningful relationships between variables? What trends are revealing themselves? This is where we are trying to answer our question from step one by using data science and computing tools.

5. Interpretation
Now that the data has been collected, organized, and then transformed into insightful information, we can interpret our findings. Did you answer the original question? Were there limitations that the analysis was not able to account for? Do those limitations affect your results? This line of questioning is important in understanding how we can report on or make decisions based on the results.

6. Act/Report
Lastly, it is time to either make a plan based on your results or provide stakeholders with the information. At this point, you must turn your results into something that is easily digestible using visualization tools and summarization.

Python Libraries

In this article we will be discussing three Python libraries that streamline data analysis by providing structures and operations to manipulate the raw data.

NumPy is a general purpose multi dimensional array processing package that provides operations for dealing with these types of complex array structures. NumPy can be used in machine learning to process images into arrays for Deep Learning. More broadly, it is the base for many other scientific computing libraries in Python where its functionalities are used to increase other library's performance and capabilities.

Pandas is one of these libraries built on top of NumPy. It is used to work with relational data and offers multiple structures and operations to transform numerical data and time series.

Matplotlib is a data visualization tool built on top of NumPy that makes creating line, bar, scatter plots, and other graphs simple.

Using Python to Analyze Sales Data

Now that we understand a bit more about the process of analyzing data and the libraries that helps us do that, let's look at an example. Your company is looking to order more products for the holidays. You think you may need to order more than usual, but are unsure how much more. Let's follow the steps outlined above to see how we should plan out this upcoming product order.

The question we are trying to answer through analyzing this data is: Based on sales from previous years, should we order more product than usual in November? This means we will want to group our data by month and year and get the sum of the sales and number of products sold.
Now, we need to review the data we have access to. Is there somewhere we have access to the raw sales data? If so, let's move on to the next step.
What state is this data in? Does it need to be cleaned of duplications or errors before analyzing it? If not, let's get to the fun part.
Now that we have clean, relevant data, let's use Pandas and Matplotlib to analyze and interpret our data.

#import libraries
import pandas as pd
import matplotlib.pyplot as plt

#create a data frame from .csv data
#set index column to the column you want to extract your rows based on 
dfYear = pd.read_csv("/file/path/to/sales_data_sample.csv", encoding= 'unicode_escape', index_col="YEAR_ID")

#make sure the date field in your data is converted to a readable date 
dfYear['ORDERDATE']=pd.to_datetime(dfYear['ORDERDATE'])

#extract the data for each year
year2021 = dfYear.loc[2021]
year2022 = dfYear.loc[2022]

#group each year by month and get the sum of all sales for each month
byMonth2021 = year2021.groupby([year2021['ORDERDATE'].dt.month]).agg({
  'SALES': 'sum'
})
byMonth2022 = year2022.groupby([year2022['ORDERDATE'].dt.month]).agg({
  'SALES': 'sum'
})

#plot each table
plt.plot(byMonth2021.index, byMonth2021['SALES'], label=2021)
plt.plot(byMonth2022.index, byMonth2022['SALES'], label=2022)

#plot styling
#change the format of the y axis to represent money
ax = plt.subplot()
def formatter(x, pos):
    return '$' + format(x, ',')
ax.yaxis.set_major_formatter(formatter)

#make sure all months are displayed on the x axis
plt.xticks(byMonth2003.index)

#label your axes 
plt.ylabel('Sales')
plt.xlabel('Months')

#title your graph
plt.title('Very Important Business Sales by Month')

#make sure your line labels appear in the legend
plt.legend()

#export the plot
plt.show()

run python <file name> in your terminal to see your graph

Output

5.Based on this graph we can see that sales are much higher in November than the rest of the year, but what does this tell us about how much product we need to order? Well, one may assume we need to order a lot more product for November. This may be true, but the sum of sales for the month may not be the best data point to look at when trying to determine how much product you need to order. This could also mean that people just bought more expensive things in November.

Conclusion

Although we looked at a fairly simple example, understanding how to use data analysis tools effectively is an incredibly important skill that many businesses need. Libraries like Pandas and Matplotlib make transforming data that much easier.

Sources
Data Analysis General: https://www.geeksforgeeks.org/what-is-data-analysis/?ref=lbp
Pandas General: https://www.geeksforgeeks.org/introduction-to-pandas-in-python/?ref=lbp
Extracting rows in Pandas:https://www.geeksforgeeks.org/python-pandas-extracting-rows-using-loc/?ref=lbp
Matplotlib General:https://www.geeksforgeeks.org/matplotlib-tutorial/?ref=lbp#line
Matplotlib styling:https://www.w3resource.com/graphics/matplotlib/basic/matplotlib-basic-exercise-6.php

Apple's Programming Language: Swift

Sydney Andre — Mon, 16 Oct 2023 00:05:58 +0000

In my last article, we took a look at mobile app development--how it is different from web development, approaches, and took a quick look at two languages, Swift and Java, that are often used for native app development. In this article, we will take a deep dive into Swift learning more about its histories and basic language features.

History

Swift was released in 2014 by Apple, but brainstorming began in 2010 by Chris Lattner and other Apple developers. Before its creation, the primary language for Apple's operating systems was Objective-C. In their announcement, Apple explains the impetus for creating Swift was to have a language that overcame the shortfalls of Objective-C. They wanted a faster, safer, and more modern and interactive language. A common misconception is that Swift only supports Apple's operating systems, but it also can support Linux, Windows, and Android OS.

Some key characteristics that set Swift apart are its safety and interactivity. By safety, they are referring to type safety. Apple claims making many common programming such as uninitialized variables, copy/reference errors, and unsafe string formatting are impossible with Swift. When writing Swift in Xcode, you have access to Swift Playgrounds which is basically a real time REPL. As you code, your results appear immediately, and you can view what your results would be over the execution of the code.

Now that we know a bit more about its history, let's learn a bit more about the language!

Language Features

Datatypes
Swift includes fundamental types such as integers, floating-point values, booleans, and strings and three primary collection types including ordered collections, known as arrays, unordered collections of unique values, known as sets, and unordered collections of key/value pairs known as dictionaries. An interesting feature of these collection types is that all values in the array or set must be of the same type. Similarly, in dictionaries, all of the keys must have the same type and all of the values must have the same type.

Variables and Constants
Similar to other languages, Swift utilizes constants and variables to associate names with a value of a specific datatype. As the name might suggest, values declared as constants with the keyword let stay constant and cannot be changes; whereas, values declared as variables with the keyword var can change values later in the program. Additionally, you can add type annotation to define the datatype of the variable or constant, although this is not necessary in practice because of Swift's type inference. You can also declare more than one variable or constant on one line. Let's take a look at an example.

//declaring constants
let name = 'Georgia', age = 8, isCute = true
name = 'Sydney' /* this would result in an error as constants 
cannot be redefined */

//declaring variables
var numOfTreats = 3, bestFriend = 'Reggie', isHungry = false
numberOfTreats = 5
bestFriend = 'Sydney'
isHungry = 'sometimes' /*this would result in an error
because variables cannot be reassigned to a value of a
different type */

Unlike these simple data types, when declaring a collection, you must define the type of values you intend to use. The example below shows the syntax that is used.

//arrays
var favFruits: [String] = ['strawberry', 'raspberry',
bananas', 'raspberry']
favFruits = [4, 7, 9] //this would result in an error
//although it can be reassigned, the new 
values must be of the same type.

//sets
var favColors: Set<String> = ['blue', 'green', 'pink']
favColors = ['blue', 'blue', 'green']
//this would result in a error because sets must contain
 unique values

//Dictionaries 
var bio: [String: String] = [name: 'Georgia', 
hometown: 'Baton Rouge', birthMonth: 'March']

Collections
Now that we know some of the intricacies of collections in Swift. Let's explore how we can access and modify each of these types of collections.

You can access the number of elements in any of these types by using the .count property. Let's use this property on our previously declared collections to see how many elements are in each.

favFruits.count //results in 4
favColors.count //results in 3
bio.count //results in 3

Similarly, all collections have an isEmpty property that will result in a boolean values. The syntax works the same as the .count property.

Arrays
Similar to bracket notation in JavaScript, you can access values at specific indexes by passing the index of the value you want in brackets directly after the array name. Additionally you can use a similar syntax to change an element in your variable array. Unlike JavaScript, the index you input must be valid, you cannot pass in an expression.

//retrieve the first element
favFruits[0] //strawberry

//change the second element
favFruit[1] = 'blueberry'

//add to the end
favFruit[favFruit.count] = 'oranges' //will result in an error

You can insert and remove values from an array by a specific index using the insert or remove methods or values can be added or removed from the end of an array with the .append and removeLast() methods. Additionally we can add another array to the end of an array using the += operator.

favFruits.insert('grapes', at: 2)
favFruits.remove(at: 1)
favFruits.append('cherry')
favFruits += ['apple', 'grapefruit']
favFruits.removeLast()
favFruits.count //8

After all of this modifying, what do you think favFruits looks like now? If you answered ['strawberry', 'blueberry', 'grapes', 'raspberry', 'bananas', 'raspberry', 'cherry', 'apple'], great! You have been paying close attention.

Sets
Now let's look at sets. Sets are unordered collections of non-repeating values. This means we cannot access values with indexes, but we still have methods to modify sets. Sets have .insert, .remove, and .removeAll methods that allow us to modify. We can also check if a value is present with the .contains method. Let's look at our favColors set again!

favColors.insert('yellow') 
favColors.remove('green')
favColors.contains('blue') //true
//What does fav colors look like now?
//['blue', 'pink', 'yellow']

Dictionaries
You can update or add a new value to a dictionary in one of two ways. Updating and adding a value, look the same syntacticly. Whether the pair is updated or added depends on if they key that is used is already in the dictionary. To remove a value, simply use the same subscript syntax to update a value, but instead set that value equal to nil. Let's take a look at our bio dictionary that was declared previously.

//subscript syntax
bio[hometown] = 'New Orleans' //hometown was updated from Baton Rouge 
to New Orleans
bio[favColor] = 'green' //favColor key was added

//updateValue method
bio.updateValue('pink', forKey: 'favColor') //changed from green 
to pink
bio.updateValue('cookie', forKey: 'favSnack') //favSnack key was added

//remove a pair
bio[favColor] = nil

When the updateValue method is used, it returns the value that was at that key before the update.

Conclusion

Swift has a lot to offer in terms of syntax simplicity, safety, and interactivity. Many say it is a great beginner language for because of this. Because of its similarities to C family languages, it is easy for seasoned programmers to pick up on and is a great tool to have on your tool belt as Apple is one of the most widely known and influential technology companies of our time.

Sources

https://developer.apple.com/swift/
https://docs.swift.org/swift-book/documentation/the-swift-programming-language/
https://www.swift.org/getting-started/
https://www.extremetech.com/computing/183563-apples-new-swift-language-explained-a-clever-move-to-boost-ios-while-holding-android-apps-back
https://en.wikipedia.org/wiki/Swift_(programming_language)
https://exyte.com/blog/introduciton-to-swift

Intro to Mobile Application Development

Sydney Andre — Sun, 08 Oct 2023 19:08:46 +0000

We all know what a mobile app is. Likely you use one or multiple mobile apps everyday... maybe even a couple in an hour. Smartphones completely changed how we interact with technology allowing us to have a supercomputer in our back pockets at all times, and the mobile apps that we download onto them are a huge part of this. In this article, we are going to learn more about the development of these apps including how it differs from web app development, the different mobile app development approaches, and some popular languages that are used in their development.

What is Mobile App Development?

Mobile app development is the process of making software applications available on smartphones or tablets, typically utilizing a network connection. Because mobile apps do not have to be accessed through a browser, like web applications, they are downloaded directly on to the device and must be developed to operate on the device's platform. This is the primary difference between mobile and web applications. We will learn about other differences as we discuss the development approaches and programming languages.

There are two primary platforms, and if you are a smartphone user, you may be able to guess what those are--iOS and Android. If this is news to you, iOS is the operating system that powers Apple products like iPhones and iPads, and Android is Google's operating system. Unlike iOS, which is only available for Apple products, Android is available to other companies that meet their requirements. These platforms are important when understanding the different development approaches.

Mobile App Development Approaches

There are four major approaches when developing a mobile app which are differentiated by how they run on the device's operating system. There are pros and cons to each approach which we will take a look at. The main thing to keep in mind when choosing an approach is--what matters most? Depending on if that is runtime performance, access to device APIS, cost, maintenance, or complexity of the code will help determine which approach is best.

Before diving into the information, this diagram Intraway.com explains the relationship the different approaches has with the platform.

Native Applications
Native applications run directly on the operating system for the device, either iOS or Android, and are written in the programming language and framework the platform specifies. Apps using this approach have the best runtime performance and direct access to device APIs, but can be costly to build and maintain. Additionally you would need to create different code bases for each platform as iOS and Android utilize different programming languages.

Cross-Platform Applications
Cross-platform applications are a type of native application which do not have to follow the programming language and framework specifications of the platforms, but are compiled into a native application to run directly on the device's operating system. Because these apps must be compiled to run on the operating system, this causes some limitations. Runtimes often perform less than native apps and you are dependent on bridges and libraries to access device APIs and other features. This is not to say that cross-platform apps do not have their perks. Since you are not building directly for one platform, you do not need multiple code bases for your app to work on devices with different operating systems and they are often allow for more cost effective maintenance.

Hybrid-Web Applications
These applications are built with basic web development technology, like Javascript, HTML, and CSS, but are bundled as app installation packages. They do not run directly on the operating system but utilize a framework such as Apache Cordova. This allows the app to run on a 'web container' that provides a browser runtime and bridge to access native APIs. Hybrid-web apps have shared code bases between the mobile and web app. This is a huge advantage since many apps have a web counterpart. Additionally, web developers can utilize their current skill base to create mobile apps, but again because they are not running directly on the operating system, there are performance and feature limitations.

Progressive Web Applications
PWAs are another kind of development approach that does not run directly on the operating system. You can think of them almost as home screen shortcuts to a website, because they are not downloaded through the app store.

Popular Mobile App Languages

As we now know after reviewing the different approaches, web developers can utilize their current skills to create hybrid-web apps, but if you want to create a native mobile app, then a developer may need to add some new tools to their tool belt. One of these skills may be learning additional programming languages like Swift and Java. These are both popular languages that are used but not limited to developing native apps.

Swift
Swift describes its self as a "general-purpose programming language that's approachable for newcomers and powerful for experts. It is fast, modern, safe, and a joy to write." This open-source language was created by Apple Inc. and is primarily used for creating applications for Apple platforms. Some features of Swift that set it apart are:

inferred types
namespaces instead of headers
automatically managed memory
no semicolons!!

Java
A powerful, general-purpose programming language created in 1995 by Sun Microsystems, now Oracle. All of Android's software development kits which are required to use to build an android application utilize standard libraries of Java. For web developers with a background in C or C++, Java should come naturally as it has a very similar syntax.

In my next article, we will take a deeper dive into Swift and Java and how they are used in native app development.

Conclusion

After reading this article, I hope you have come away with a better understanding of mobile app development. There is still much left to learn, but having a foundational understanding of the approaches and skills you may need to develop your own mobile app are important first steps.

Sources

Understanding and Comparing Relational and NoSQL Database Management Systems

Sydney Andre — Sun, 01 Oct 2023 21:24:59 +0000

Understanding

Before we dive into comparing these database management systems. Let's start from the beginning to ensure we understand what a database is, how database management systems (DBMS) are used to interact with and manage databases, and the features of relational and noSQL DBMSes.

What is a database?
This is pretty intuitive and many may be able to make an educated guess on this definition. A database is a collection of related data that is populated with a purpose and includes relevant information pertaining to that purpose.

What is a Database Management System?
If a database is just a collection of related and relevant data, then a DBMS must be the way you manage that data so it can be useful for your purpose. More specifically, a DBMS allows you to define the database's schema which is the description of how data is stored including the data's type, structure, and/or constraints. Additionally, the DBMS is used to construct, store, update, query, share, and control access to the data.

As you can see, the DBMS gives you the functionality to make use of your database, so understanding the features of each can help you to better manage your data with the system you are using or plan to use.

Relational Database Management Systems
Simply put, relational database management systems(RDBMS) store data in tables and primarily use Structured Query Language (SQL) to access the database. Some modern RDBMSes are mySQL, Microsoft SQL, and Oracle. An RDBMS can have any number of tables, but the relationship of the columns and rows is consistent throughout. Columns represent specific information about every record, and the rows represent each record. Additionally, all tables include a column of a unique identifier called the primary key. This is used to identify the table as well as link various tables to one another. When one table's primary key is used in another table, it is referred to as a foreign key. Let's take a look at an example.

Say you wanted to store data using a relational database management system to hold information about all of your pets. Let's make the first table hold general information about each pet. The second, linked table will hold nickname data for each pet.

As you can see in the tables above, both have a primary key that give each record in the table a unique identifier. The primary key in the Pets table is Pets ID which is used as a foreign key in the Nicknames table to link the nicknames of each pet to the general information about that pet. By having access to both tables, you would know that Georgia's nicknames are Sausage and Angel baby.

This kind of structure is helpful in reducing any duplication of information which in turn saves storage--an important point in the early uses of RDBMSes. Now, let's talk about the non-tabular systems, also referred to as noSQL or 'not only SQL'

NoSQL Database Management Systems
These management systems store data in a variety of data structures. The main ones include:

document-based: stores data in documents similar to JSON objects where each document contains pairs of fields and values.
key-value: stores data in key value pairs
wide-column: stores data in tables with dynamic columns
graph: stores data in nodes and edges

Although each has their own unique features, in general noSQL databases include flexible data models and horizontal scaling. Having flexible data models allows developers to be agile and quickly change requirements. There are no strict schemas that must be followed which allows developers to keep up with the needs of today's fast-paced businesses. Horizontal scaling means you do not need to scale up to a larger server when you have reached capacity. Instead, you can spread out over cheaper commodity servers when necessary.

Now that we know a bit more about what noSQL DBMSes are, let's take a look at data from the example above refactored using a document-based noSQL DBMS.

`{
id: 0o1,
name:'Georgia'
breed:'Basset Hound Mix'
birthday: 3-24-2015
favNapSpot:'in front of fireplace'
nicknames: ['Angel baby', 'Sausage']
}

{
id: 0o2
name: 'Reggie'
breed: 'Pit Bull Mix'
birthday: 7-4-2016
favNapSpot: 'couch by Mom'
nicknames: ['Mr. Reggie', 'Brother']
}`
Unlike the RDBMS example, where you would need to join both tables to have access to all the information about a pet, with this example, you only need to access one of the documents to have all of the data on a pet.

Now that we have a deeper understanding of all things database managements systems, let's compare two popular systems from each type.

Comparing

Relational vs noSQL
The main advantage of RDBMSes is that multiple data elements can be accessed at the same time. This allows for multi-record ACID (atomicity, consistency, isolation, durability) transactions which provides a high level of data consistency. On the other hand, it can be very ridged because you must have predefined schemas that set the structure of your data.This means there is a lot of pre-planning that must go into set up and changing that structure is complicated and cumbersome.

In contrast to these advantages and disadvantages, noSQL DBMSes allows for a lot of flexibility when it comes to data structures. Documents/data elements do not need a pre-defined schema and each document can have a different structure. Although this flexibility is necessary for the evolving needs of fast-paced industries, some argue noSQL DBMSes offer less security and data integrity.

Scalability is another main difference between the two types. RDBMSes have vertical scalability meaning that you must scale up to a larger server when your have reached your max capacity. Although this can be viewed as a disadvantage because getting a larger server is costly, storage is more conservative in RDBMSes because they were invented much closer to the advent of the internet and computers when storage was costly. On the other hand, noSQL DBMSes have horizontal scalability meaning you can spread over many servers. This is advantageous for many modern businesses that have ever growing data storage needs.

Conclusion

After reading this article, I hope you come away with a better understanding of the database basics. Having this foundational knowledge before diving into more complicated database management and administration is important. We can see that both types of management systems have their pro and cons. RDBMSes make it easy to ensure the security and integrity of large amounts of data and have an intuitive data structure that is easy to understand; whereas, NoSQL DBMSes are better when availability and flexibility of your data is of higher priority.

Sources

What is a database? and What is a DBMS?
https://spots.augusta.edu/caubert/db/ln/CSCI_3410_lecture_notes.pdf
Relational DBMS
https://www.techtarget.com/searchdatamanagement/definition/RDBMS-relational-database-management-system
NoSQL
https://www.mongodb.com/nosql-explained
https://intellipaat.com/blog/what-is-no-sql/
Comparing
https://www.geeksforgeeks.org/difference-between-sql-and-nosql/?ref=lbp

Higher Order Functions

Sydney Andre — Thu, 17 Aug 2023 17:37:03 +0000

What are Higher Order Functions?

Simply put, higher order functions are functions that accept single or multiple functions as arguments and/or return functions as their output. The functions that are used as arguments are called callback functions.

We can do this because functions are first class objects. This basically means functions can act just like other datatypes. For example, you can assign a function to a variable which is called a function expression. Additionally, functions can be stored in objects and arrays.

//function expression
let funcVariable = (a, b) => a + b

//function as an object's value
let funcInObj = {
fullName: (first, last) => `${first} ${last}`
}
//functions as values in an array
let funcInArr = [(first, last) => `${first} ${last}`, (age) => `I am ${age} years old`]

Unlike other datatypes, functions not only store data, they often perform an action in your code. By accessing the function assigned to the variable or within the object or array, you can call the function and create an action in your code.

//calling a function assigned to a variable
funcVariable(6, 7) //will return 13

//calling a function in an object
funcInObj.fullName('Ilana', 'Wexler') //will return Temperance Brennan

//calling a function in an array
funcInArr[0]('Abbi', 'Abrams') //will return Seeley Booth
funcInArr[1](26) //will return I am 26 years old

Now that we understand what higher order functions are and why we can use them in this capacity, we will dive deeper into how to use higher order functions in our code by taking a look at common array methods that are actually higher order functions.

Common Higher Order Functions and How to Use Them

.filter(), .map(), and .reduce() are native methods in JavaScript that allow us to easily manipulate datasets using higher order functions. Behind each of these methods are for loops that access each element in the input array so you can call various functions on each value. These methods decrease the number of lines of code we must use and allow for more efficient coding. Below we will dig into how to use each of these methods.

.filter()
The .filter() method is designed to take in an array and a function. The callback function tests each element of the array and will only return the values that pass the function's test as a new array.

Let's say you have a data set of customers and you want an array of only the customers over 40. The .filter() method would be a great way to get this information.

let customers = [
{name: 'Ilana Wexler',
city: 'New York City',
age: 21
},
{name: 'Temperance Brennan',
city: 'Washington DC',
age: 45
},
{name: 'Abbi Abrhams',
city: 'New York City',
age: 26
},
]

let over40 = customers.filter((current) => current.age > 40)
console.log(over40) //will log [ { name: 'Temperance Brennan', city: 'Washington DC', age: 45 } ]

As you can see if the code above, we are using the filter method on our array of customers with a callback function that is testing each element to see which customer has an age value over 40. Because of .filter()'s behind the scenes code, this pushes all of the elements that pass this test into a new array.

.map()
The .map() method is designed to take in an array and a function and return an array of new values based on the actions of the function. In other words, the callback function is called on each item in the array. These updated values are then pushed into a new array which is returned.

Let's say we wanted to output a new array of customer objects with an additional property. The .map() method can help us do this.

let updatedCustomers = customers.map(current => {
  return {
    name: current.name,
    city: current.city,
    age: current.age,
    lovesPizza: true
  }
})

Using the .map() method we are able to create a new array by calling this callback function that adds a new key/value pair to each of the elements of the input array.

.reduce()
The .reduce() method is designed to take in an array, a function, and a seed and return an accumulated value based on the action the function performs on the array. The seed value is optional but should be used if you want to return a value that is not an array.

The callback function accepts two values, typically referred to as accumulator and current but can be labeled with any name. The value of the current parameter is an individual value from the input array.

Let's say you wanted to know how many customers in your data set live in New York City, the .reduce() method would be a great way to find this out.

let findNYCResidents = customers.reduce((accumulator, current) => {
if(current.city === 'New York City'){
accumulator += 1
}
return accumulator
}, 0)
console.log(findNYCResidents) //will return 2

.reduce() is a very powerful method that has many uses because of the flexibility the seed value allows. Here we access each value in the array and pass it through our callback function that adds 1 to our accumulator every time a customer passes the callback function's test.

Understanding higher order functions is very important in being able to create flexible, efficient code, so I hope you were able to take away a better understanding after reading through!