DEV Community: pqyetman

Object Oriented Programing Languages, Ruby, and Ruby Gems

pqyetman — Wed, 26 Oct 2022 17:01:02 +0000

Phase three of FlatIron introduced us to Ruby and SQL, but was more concentrated on Ruby. Ruby is an Objected Oriented programing language, to which we were told “Everything is an Object.” Because that sentence doesn’t hold any greater meaning to me, I decided to investigate a little further to try and make sense of that cryptic aphorism.

Object-Oriented Programing

According to infallible Wikipedia on object-oriented programing languages, “Object-oriented programming (OOP) is a programming paradigm based on the concept of "objects", which can contain data and code: data in the form of fields (often known as attributes or properties), and code, in the form of procedures (often known as methods).” It goes on to mention that methods can be attached to objects to modify the data (In ruby I have really been enjoying the simplicity of “dot chaining” those methods to anything I want).

Also written on that Wikipedia “In this brand of OOP, there is usually a special name such as this or self to refer to the current object.” This has been especially useful in creating our custom methods, for a specific instance or an entire class.

One of the major aspects of OOP seems to be this idea of classes which according to Wikipedia is “the definitions for the data format and available procedures for a given type or class of object; may also contain data and procedures (known as class methods) themselves, i.e. classes contain the data members and member functions” and the relationship to objects which are “instances of classes”. I am not sure why but it makes me think of this Russian (Matryoshka- I looked it up) doll, with each larger one being a class to the smaller one and each smaller one being object or instance of its larger class.

Ruby

I'd like to start off by saying I really do appreciate Yukihiro Matsumoto. This quote makes me think he is a good guy.

“Often people, especially computer engineers, focus on the machines. They think, "By doing this, the machine will run fast. By doing this, the machine will run more effectively. By doing this, the machine will something something something." They are focusing on machines. But in fact we need to focus on humans, on how humans care about doing programming or operating the application of the machines. We are the masters. They are the slaves.”

Forget John Connor I think we know who our real champion is. For me, early on, you could tell by the naming convention of certain methods that this language was created to be, dare I say intuitive. Iterating through arrays and hashes seems much simpler than JavaScript. Even the following bit of code leaves little to guess what is going to happen:

100.times do 


        Customer.create(
        name: Faker::Company.name,
        address: Faker::Address.street_address     

        )

end

I'm sure this will change as things get more complex but for now, I am very content with the “dot-chaining” and method naming conventions.

Ruby Gems

Just like the libraries and frameworks (ex: Bootstrap) with React in phase 2, ruby has a package manager called Gems. All of these Gems can be found at https://rubygems.org/ . Each gem has a name (ex. Rake), version (13.0.6), and platform (ex. Ruby – which means it works on any platform Ruby runs on.). Platforms depend on CPU architecture and operating system (MAC OS, Windows OS, etc). According to this following link each Gem follows the following file structure:

To find out more about the GEM you would read the README file to get the proper procedure for installation and usage. The gemspec contains specific information about the author and version. The lib file contains the code, and the executable file is in the bin. A gem usually has a rake file, Rake is also a gem that was mentioned above. The gem’s rake file will allow you to automate tests, generate code and perform other actions from the CLI of your computer.

I did really enjoy this security aspect of ruby gems in the FAQ link

“The same way you can trust any other code you install from the net: ultimately, you can’t. You are responsible for knowing the source of the gems that you are using. In a setting where security is critical, you should only use known-good gems, and possibly perform your own security audit on the gem code.

The Ruby community is discussing ways to make gem code more secure in the future, using some public-key infrastructure. To see the progress of this discussion, visit the rubygems-trust organization on GitHub”

Overall the message seems to be that ruby gems are a powerful tool just be careful what you download

A Beginners Explanation of Components, Props and State in React

pqyetman — Wed, 05 Oct 2022 12:57:03 +0000

As a beginner writing this after spending a week with REACT, this is most likely going to come across like the following link:

My Explanation Visualized

React - How do you speak it?

It feels like the creator of react (Jordan Walke/Facebook/META/MIT?) really hated document.createElement,
document.querySelector("").appendElement and switching between screens to write HTML and JavaScript in general. So out of spite JSX was born, or at least this is the conclusion that I have come to.

Note: Allegedly React was made it so that large amounts of code were easier to read, but as a student with just over a week in I don't believe it.

JSX appears to be .innerHTML("") on steroids. And just as I was typing this blog, and coming to the conclusion "wow that's has to be dangerous" I came across this nugget via the following link JSX:

"By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks."

Elements, Components and Props Oh My!

Elements go inside of components and are how things get displayed on the DOM. Elements are apparently cheap to create (I'm assuming that's cheap related to computing power as REACT only updates what's "new" when it renders?). They can contain multiple HTML components, variables, and object and array values. If you are mapping an array of elements make sure to use a key!

Components (syntactically always get started with a capital letter) and are the blocks which make up the hierarchy of your application/program/website. These components can have parents or children (children must be exported in the child component and imported into the parent), not sure how many generations were allowed to use. More on that in a future blog.

Props are magical portals which allow you to share...stuff, with other components. That is so long as those Components have a parent child relationship. You can share props indirectly with two sibling components, if the parent component gets involved...yeah that sounds right?

These props are the logic that allows you to pass information from one component to another. This comes in handy when you have an event listener in a child component but need to re-render a parent component from that child component event. This is done using state in the parent component and by passing a callback function through props to the child. Props can also be used to pass fetched API data down form parent to child components. One thing to know about props is that they have to be "pure", meaning that if you pass a function with a parameter and argument you cannot alter that argument inside of the prop-function. So don't pass any count+= functions as props.

That should have been absolutely crystal clear, now onto state...which I'm currently not a fan of. Hopefully that changes soon.

An Ode to State

For a good day and a half I thought I always needed the state variable inside of the state setter function because of a misinterpreted Scrimba video, so I may still be a little bitter.

Here's what I believe to be important about state:

You have to import it - {useState} in the component you are using it in
Its comprised of a state variable, a state function and an initial value to which your state variable is set
You should use state when you need to change something in your component and re-render the page
It will be initially confusing especially if you watch the Scrimba video I did.

The state variable gets set to an initial value in your component. Then if you want to change that initial value, you need to use the state function. The state function can change the value of the state variable to what ever you wrap the state function with. When this setter function is called it will re-render the page and assign the new variable value to the state variable.

This was an oversimplified explanation of state, components and props. You can find out more about the items mention above in the following link.