DEV Community: mx. laura

What's up with so many Javascript frameworks?

mx. laura — Tue, 11 Apr 2023 17:25:11 +0000

I wrote this high level overview of Javascript Front End Frameworks to help beginner coders (who are already familiar with React) understand the differences between other Javascript front end frameworks and tools. This is by no means an exhaustive list, nor an in depth one. Some of the opinions found here are based on my research of other people's thoughts on these tools, so if there is anything here that you consider inaccurate, let me know in the comments! I'd love to hear what other developers think of these frameworks.

Notes on Vue

Released in 2014

Vue was designed to be flexible and incrementally adoptable. Meaning that you can add Vue at any point during the development process. You can use it either as a library (aka, minimal Vue interaction) or as a full framework.
One of the main ways that people use Vue is by building single file components. This is when we have Javascript, HTML and CSS for this component within a single file.
pros:
- short learning curve for JS devs
- lightweight
- highly compatible with most projects
cons:
- difficulty with older browsers
- limitations in plugins/libraries in comparison to other frameworks

/App.vue

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello, World’
      }
    }
  }).mount('#app')
</script>

Source: https://vuejs.org/guide/quick-start.html

Notes on Angular

AngularJS released in 2010, Angular released 2016

AngularJS came first, but as of 2022 it is no longer being updated.
In 2016, Angular was released. It is a rewritten version of AngularJS, and it is not cross compatible. Meaning that, generally speaking, an AngularJS project will need to be extensively adapted to be able to support Angular.
Angular is designed to make updating as straightforward as possible.
Angular was built for easy scalability, from single-developer projects to enterprise-level applications.
pros:
- huge community and history
- loads of libraries available
cons:
- steep learning curve
- high complexity
- need to be aware that it is different from AngularJS
meh?: corporate backing by Google (could be a pro or a con, depending on your view of corporate maintenance of frameworks)

/hello-world.component.js

import { Component } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: `
    <h2>{{ message }}</h2>
    <p>This is my first component!</p>
  `
})
export class HelloWorldComponent {
  message = 'Hello, World!';
}

/index.html

<hello-world></hello-world>

Source: https://angular.io/guide/what-is-angular

Notes on React Native

Released in 2015

Mobile app development using code based on React.
pros:
- short learning curve for React developers
- supports both iOS and Android
cons:
- debugging can be a pain (devs need to leverage a debugging library for development of React Native)
- complex smartphone gestures are not fully supported
- will require expanding your knowledge of both mobile engineering and web development.
meh?: corporate backing by Facebook (could be a pro or a con, depending on your view of corporate maintenance of frameworks)

/App.jsx

import React from 'react';
import {Text, View} from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
};

export default HelloWorldApp;

Source: https://reactnative.dev/

Notes on Next.js

Released in 2016

Next.js is a React framework. It comes bootstrapped with an assortment of libraries for building out your React app. Similar experience to create-react-app, the command to start out a Next.js app is create-next-app.
Includes features such as file based routing and the pre-rendering of HTML.
pros:
- quick way to get a site up and running
- great choice of tools right out of the box
- feels like an upgrade to React without being too heavy.
cons:
- opinionated (you’re committing to a set of pre-installed dependencies)
- not as many available plugins in comparison to other React based frameworks

Source: https://nextjs.org/

Notes on Gatsby

Released in 2015

Like Next.js, Gatsby is a React framework. It is also bootstrapped with an assortment of libraries, and can also be created with just one command. In Gatsby's case, this is npm init gatsby. Netlify acquired Gatsby in early 2023.
pros:
- like Next.js, easy to get up and running in development
- LOADS of plugins available
cons:
- opinionated (you’re committing to a set of pre-installed dependencies)

Source: https://www.gatsbyjs.com/

Other frameworks to look into

Originally posted on my github.

Photo by Lautaro Andreani on Unsplash

How to Use Free Resources as a Shortcut For Your Job (or, How I used the Wayback Machine to Fix Frontend Code)

mx. laura — Fri, 02 Oct 2020 21:19:52 +0000

The Situation

As a web developer at NYU Libraries, I get to participate in all kinds of projects. I manage well established open source repositories, maintain our apps, create tools for better day-to-day workflows, and fix all kinds of little bugs (while accidentally creating some along the way). Recently, there was a small issue that required me to investigate why our footer didn't look like how it was supposed to.

Mind you, I am relatively new to my position, and I usually don't pay attention to footers in my day-to-day life. This got me thinking, how is this footer supposed to look like anyway? Likewise, no one really knew when this happened, so I didn't want to spend ~~minutes~~ hours looking through commits in a monolith repo I'm not very well aquainted with. So I revisited one of my favorite free online resources: The Wayback Machine!

The Wayback Machine

Managed by the non-profit Internet Archive, the Wayback Machine is an essential tool for anyone who is interested in the digital curation of the web. It's an massive catalogue of billions of web pages, with frequent stashing of updates for a fully interactive (and reliable) experience. And honestly, sometimes it's kind of fun to scroll back and see what web pages looked like in 2010.

Spoiler alert, they did not look great.

The Solution

Regardless, I went to the website that had the issues and went back a little bit too far. Which, fun for personal reasons but not exactly what I needed. After a bit of tinkering in the dates, voilà! Right what I needed.

Apparently, the bullet points are a no-go and there should be some kind of dotted line in between each list item. Thankfully, since it is fully interactive, I can actually see exactly what CSS styles was missing in ours.

So, now... why wasn't that appearing in our version? And then I saw the key: our footer <ul> didn't have the .list class anymore. So in the end, it was an easy fix. And I could go on the rest of my day, and celebrate my catch with a hot lavender tea.

Conclusion

Work smarter, not harder. Or something like that.

...OK, real conclusion

Use free resources! By using these online archives, you participate in one of the biggest communities of free information available in current times. And, you get the added bonus of getting distracted with uncool websites from the mid-2000s.

Nevertheless, Mx. Laura Coded

mx. laura — Mon, 09 Mar 2020 18:51:00 +0000

Hello world!

2019 is the year I became a coder. Nowadays, I have projects I’m continuously working on, I can join others in hackathons, I can answer questions about algorithms, and I get to meet new people interested in the same tech as me all the time. However, getting to this point was a struggle for which I needed help. Thankfully, there are people that want to help the LGBTQ+ community get into tech.

I couldn’t have started this journey without the help of organizations that believe in making the future of tech be more diverse. I have to thank the Edie Windsor Coding Scholarship from Lesbians who Tech and the Grace Hopper Program at Fullstack Academy. Their commitment to providing safe spaces for LGBTQ+ students to explore tech careers is crucial for the development of professionals who need help getting their foot in the door.

My time at Grace Hopper Program was exciting, nerve-wracking and fun. In the Junior phase, we mostly took lectures and then completed workshops in pairs. You get paired up with someone new every day. At first, I was shocked. Pair programming?! With strangers?!?!?!?! No, thanks. However, it quickly turned out to be one of the best parts of the program. Getting to know the work styles of everyone there really put into perspective how different we can all be, and you end up picking up new ways of approaching challenges because of other's perspectives.

Most of the time spent in Senior phase was split between three sorts of activities: projects, lectures about computer science, and career success. In the projects, we were able to experience first hand how agile software development works and experiment with the skills we learned in Junior phase. In the lectures, we focused on algorithms and data structures. And lastly, during career success we discussed how to achieve positive outcomes from the job hunt after the program. Having said that, the part I was most nervous about was weekly coding challenges in which we did technical interviews to fellow cohort mates and in return they interview you on another day. It was stressful to display your knowledge and struggles in front of another person, but every week felt a little more comfortable than the last.

The amount of support and love I received from my cohort is something I will cherish forever. The kindness with which people helped each other, no matter the complexity, made all the difference when I felt lost. Coming in with a non-technical background, I was afraid of falling behind and being shamed for it. However, my colleagues were always there for support and would never belittle anyone’s questions.

However, some of my struggles in the bootcamp weren’t coding related. One of my issues was making sure that people actually included GNC and non-binary people in a mostly female coded space. So on that note, I’d like to give advice to other non-binary people navigating “woman and non-binary” spaces: don’t give up. We’re here, we’re queer, and we’re here to stay. If you want to talk to other non-binary tech people, we exist and we're here for you.

Learning how to code has been life-changing, and I’m excited to see what I’m able to create alongside other fantastic coders. I’m grateful to have met so many people who want to see their colleagues grow, and can’t wait to keep meeting new people with exciting ideas.