#jbuilder

Today I Learn: about JBuilder

Today we got to play around with the google map api when making our BenchBnB project. This project is meant to give us a taste for what it will be like to do our capstone. We were to build up this app for Benches from scratch. It was a cool project, I seeded the database with some unique/cool benches in NYC.

Some features we had included showing the bench locations with a marker/pin. This gave us more practice using the Flux architecture.

I enjoyed this project and we will be continuing Day 2 on Monday.

On a related note, I am excited for the upcoming capstone project. This weekend, I'll be making a project proposal laying out my phases with some hand-drawn lo-fi wireframes.

Today I Learned: about React Router and JBuilder

We began the day with a review of yesterday's project: Organ Grinder. After review, we had a lecture on JBuilder and React Router. React Router allows our single-page app to simulate new page renders/redirects while still being a single-page app.

Cool.

My partner and I got to work with Flux and React some more as well as use React Router with today's project. We created a PokeDex!

The PokeDex was pretty lack-luster. It only had 124 Pokemon. I'm no Pokemon master, but I know there are more than that. Anyway, my partner and I were able to use a hash history to mimic redirects/new renders. We both had a great time today.

The other exciting part of the day was finding out our Capstone projects! I got my first choice!

First day where I actually make a flux loop looping and on which we can build new features. We also had a first coding experience working with a public API. We’ve already worked with APIs before, but mostly APIs that do things under the hood. Playing with an API from a product I use almost everyday (google map) was cool.

We’ve also talked about jbuilder. We could define jbuilder files as views that collect, curate and transmit json data to the framework we cherish and love. React (SEO).

Week end spent at: 75% crafting the capstone project proposal and 25% chilling max. The project will eventually be a Product Hunt clone. I aim for a mirror clone at first, I let the doors open for customization along the way.

I had another idea that I’ll keep for after the program. It’s a screencast platform for building clones of famous webproducts.

jBuilder works magic. I removed the ‘index’ routes from the ‘review’ model and now just serve up all of the review data I need with any given venue or user. I found myself needing to know if any of a venue’s reviews are written by the current user, and now I can just toss a boolean in the json and have that information ready to go.

I was rendering some JSON today using Jbuilder and noticed that rendering one larger template is preferable to rendering partials in partials. For example when rendering a collection of boxes with books inside:

index.json.jbuilder

json.array!(@boxes) do |box| json.box do json.id box.id json.totalWeight "#{box.books.map{ |book| book.shipping_weight }.inject(:+)} pounds" json.contents do json.array!(box.books) do |book| json.title book.title json.author book.author json.price "$#{book.price} USD" json.shippingWeight "#{book.shipping_weight} pounds" json.isbn10 book.isbn_10 end end end end

The above single file is preferable from a performance standpoint to:

index.json.jbuilder

json.array!(@boxes) do |box| json.partial!("box", box: box) end

_box.json.jbuilder

json.box do json.id box.id json.totalWeight "#{box.books.map{ |book| book.shipping_weight }.inject(:+)} pounds" json.contents do json.array!(box.books) do |book| json.partial!("book", book: book) end end end

_book.json.jbuilder

json.title book.title json.author book.author json.price "$#{book.price} USD" json.shippingWeight "#{book.shipping_weight} pounds" json.isbn10 book.isbn_10

Download borland jbuilder 7 standard edition