FS Blog #5: Social Poster - My JavaScript Project

For my JavaScript project, I'm building Social Poster, a web application and social platform that let users create, edit, and delete posts, as well as like and save posts. Users can create, edit/update, and view their posts, as well as view, and edit other user's posts. They would also be able to see all community posts and view all posts by category.

This project uses Rails API for the backend, and JavaScript for the frontend. This was a natural progression from the last Rails project, where we used Rails views/.erb files only for rendering. This feels even more like a real world application, where JavaScript is often used for building the frontend of a web application.

Before I started building the app, I first wrote out the user story and designed the model/class relationships: my app was simple, I had two models, Post and Category. The category has_many posts, and post belongs_to category. The category has attributes like category name and category description, and the post has attributes like title, content, media url, and category.

The Tech Behind Social Poster

After drawing out a flow chart for the app, I then start setting up the app environment and structure. As a part of the project requirement, I'm using Rails API for the app's backend, and JavaScript (and HTM & CSS) for the frontend.

Part 1: The Environment & Setup:

Rails API - This app uses the Rails API for the backend. To setup the app and generate the structure of the app, I used rails new commands:

• rails new js-social-poster-api —api - this command creates the project with rails API (not the full rails).
• rails g resource - this command generates the project file structure, including the controllers, models, migration files, views, etc.

Some of the Gems & Languages used:

• Ruby
• Rails
• JavaScript
• HTML
• CSS
• Debugger
• Sqlite3
• Puma
• Bootsnap
• Rack-cors
• Faker

Part 2: The Programming & Concepts:

Coming from Ruby, Sinatra, and Rails, diving into JavaScript felt very different. There were a lot of similarities between Ruby and JavaScript (or between programming languages in general), but there were a lot of differences as well. As a part of the project requirement, in addition to cover the project requirements, I tried to use as many concepts as I learned about JavaScript in the app, while still keeping the app as a very simple MVP.

Concepts I used:

AJAX: "asynchronous JavaScript and XML", it's the process used to make requests to the server and update the DOM without loading the web page. AJAX allows use to get data from multiple sources and allows us to pull in dynamic content.

JSON: "JavaScript Object Notation"(JSON) is a String that JavaScript knows how to turn into a object. Using JavaScript, we can access the JSON returned by the server and use it to update the DOM

ES6: "ECMAScript 6"(ES6), or ECMAScript 2015, was the 2nd major revision to JavaScript. Some of the most important new features of ES6: let, const, Arrow Functions, For/of, Classes, Promises, Symbol, Default Parameters, Function Rest Parameter, Array.find(), Array.findIndex(), new math methods, new number properties, new number methods, new global methods, Modules, etc.

CORS: "Cross-Origin Resource Sharing" (CORS) is designed to prevent scripts like fetch() from one origin accessing a resource from a different origin unless that resource specifically states that it expects to share. (By using the --api flag, the Gemfile was altered to include the rack-cors gem. The gem will be commented out intially and we need to uncomment the gem and run bundle install.)

fetch() - fetch() is like a mini browser in your browser, you tell fetch() to go to a URL by passing it an argument, and it makes a network request. You chain calls to fetch() with then(). Each then() call takes a callback function as its argument. Based on actions in the callback function, we can display or update content in the DOM.

Arrow function⇒ Arrow function is a compact alternative to a traditional function expression, but is limited and can't be used in all situations. It is a way to write functions in a very short way (using an arrow =>). It builds on the syntax of the function expression. (ex: let add = (parameter1, parameter2) => parameter1 + parameter2; let twoAdder = x => x+2) It lists the parameter, separated by comma, inside of (). If the arrow function has only one parameter, the () become optional around the parameter.