akanshmurthy - Tumblr blog

[akanshmurthy]

Bootstrap modals, Rails, & React.js/Flux

TLDR; Check out my Gist for code snippets to include a modal in React as a show page (no rerouting requried) for a clicked element.

------

While I was experimenting with Bootstrap modals in React, I found two different ways to use modals as show pages for elements instead of creating a separate show page for each element, resulting in route to a new page. 

One was to use the ReactRouter History Mixin and reroute to an elements show route by using this.history.pushState(), grabbing the id from whatever was clicked on. However, this proved problematic because it involved creating a whole new route and including all the same components as the prior route plus the show modal component so that the UI looks the same. Then, on close of the modal, a reroute to the prior page would be required. WAY more complicated!

The other way is to have the click on the element trigger an action that dispatches data (including the element id) to a store, which changes some data stored in the store. A modal manager component can be listening to the store. When the store changes, the modal manager component rerenders to reflect the new changes. If the modal needs to be initiated, then a show modal component (which has the actual Bootstrap modal code) can be rendered. Otherwise, an empty string can be rendered. This way, no History Mixin is required and no rerouting is required! Check out my Gist for a better idea of what I’m talking about (it is a snippet from my code where the element is a post; I’ve included directory locations with a comment above each section). 

Hope this helps someone and feel free to contact me if you have questions!

[akanshmurthy]

w9d5

"With great power, comes great responsibility.” I think this was the quote that was said when App Academy students are finally handed their App Academy red shirt of honor (i.e. we got our red t-shirts today) as they transition from learners to developers :)

Today was our last day of the final projects (technically, we still have the weekend and Monday because a new cohort starts on Monday and so we have the day off) as we move on to the final portion of the App Academy curriculum. It’s been a whirlwind of learning and experimentation and I’ve learned so much in just a 2 months, probably enough to last 1-2 years in a normal-paced college curriculum. 

I spent most of today doing more styling/animations for my application as well as creating a new model/component/Flux cycle to hold users’ files. And, I kept fixing bugs that pop up. I’m so excited about ideas for my app each night that I have a hard time falling asleep- I just wish I had more time to keep building. For now, I’ll spend most of the weekend adding some necessary features. STAY TUNED for more details!!

[akanshmurthy]

w9d4

I’m on a styling streak! I continued to style all day today, working my way through the profile page to the notification bar to a new page I created for resources. 

I decided to incorporate some 3rd party APIs that will be helpful for a patient (HealthTap and BetterDoctor). The HealthTap API was in the form of a pre-packaged widget so it wasn’t too difficult to put it into my resources page. But, I had to implement a complete Flux cycle (api utils, actions, dispatcher, store, component) for the BetterDoctor API. Since I probably won’t get to implementing doctors as a type of user, I won’t be able to use the Doximity API just yet to credential the doctors- bummer! 

Finally, I spent some time exploring/contacting companies to see how I could allow users to be able to upload files and view them on my app through the Box API and the Filepicker API (seems like I could create a file model that belongs to a user... if I have time) in a secure manner, which also led to my contacting Aptible (a HIPAA-compliant server as a service company). There isn’t too much else to report for today! Until tomorrow... :)

[akanshmurthy]

w9d3

Today was all about style. Green sneakers, gym shorts, and a t-shirt. That’s style. Just kidding! Since today was the first peer-review of our app, we were encouraged to get our style in order. I tried a few things but quickly realized that I had made a mistake by using Bootstrap as my base for the past few days because it was rigid and wouldn’t allow me to override its initial styles with my own very easily. And, even if it did, I’d have to create ids on every element to do so in order to win the CSS specificity game. 

In any case, the peer review sessions were awesome because I got to see what others thought of my work so far and I got to see how far others had gotten. I think my app lacked quite a bit in style, which is where I’ll be putting a lot of my focus for the next few days. I also think I might need to add more functionality because the limited, healthcare scope of my project has resulted in fewer features than I thought (even though a lot of what I’ve built is complicated underneath and took a lot of code to construct). 

I was humbled by some of the styles I saw today in others’ apps and I am inspired to get the ball rolling on my own site. 

[akanshmurthy]

w9d2

Bugs, bugs, bugs- where are you hiding? This should be the start of a song :)

I spent most of today dealing with 4-5 bugs that I had noticed and fortunately fixed them all (with some help from some awesome TAs!). One bug was involving the need for a hard refresh to update a global JavaScript variable that we being fed by a Rails query. Another bug was related to non-unique constants. What I learned was that small mistakes can bubble up and impact an application on a higher level, when it’s harder to trace the bug that may have occurred long ago. But, it’s fun to figure it out- kind of makes me feel like a detective/scientist with a fast turnaround cycle. And, React/Flux architecture definitely helps with debugging even though I wish the error messages were more informative like in Ruby/Rails. 

My code ended up getting a major refactor (away with you, this.history!), which made modal functionality for regular posts and medical posts WAY easier. At this point, I have created my MVP and will switch to styling and bonus features.

Ciao!

[akanshmurthy]

w9d1

WEEK 9??! Wow, time flies when you’re coding...

Today, I continued to work on my final project. After fixing a few bugs this weekend, I focused my time on finishing out the design of my profile page only to realize that the design of the model was questionable and that I would need to rethink it. After rethinking it for a while and coming up with a more modular design, I spent a few hours trying to make in-line editable entries in the profile page only to realize that the external library I was using was messing up some of my earlier code/libraries... Then, I made a decision to have the profile page keep a similar post structure to my home page and things seemed to work out. I extended my search functionality to choose the first item found if the user hits enter or clicks the submit button and I incorporated the new posts on my profile page as part of the search corpus. Phew- what a long and hard day. 

I’m looking forward to getting all my functionality right and my bugs cleared during this week. 

[akanshmurthy]

w8d5

Onwards and upwards! Easier said than done. I switched over to my next major phase, which consists of building out a medical profile page for the patient/user. I initially created a few divs that fit the general outline of a profile page but didn’t like the design of it (made me really appreciate Bootstrap). 

However, I went on to implement the profile picture upload through a service called Cloudinary, which I’ve used before. This took WAY longer than expected due to difficult documentation and something to do with upload presets. 

After I got the picture upload working, I tried to make the picture url persist in the database as a new attribute of the User model. The ajax request, a patch, proved to be a little harder to implement but worthwhile after it started to work. 

Finally, I tried playing around with Bootstrap tables and tab widgets to see if they could be the main component of my profile but I wasn’t satisfied there either. Needless to say, I need to clean up the design this weekend and make some hard choices. Today felt difficult, especially as some bugs surfaced along with React warnings that I didn’t understand. I hope to decipher it all soon!

[akanshmurthy]

w8d4

Search snafu. Modal madness. These four words described all of today. The search part was crazy yet cool because I got to understand how real-time search works and what is happening behind the scenes even though it involved a complicated filtered ajax request with params sent in from a component that resulted in an even weirder SQL query on the backend to match the user input substring to any posts within the database (this needs to be optimized with some prefetching or something similar soon to decrease hits to the database). 

I also spent many hours trying to implement a modal in lieu of a show page for a real-time search result. This was problematic because I initially didn’t have a way for the modal to know which post was being clicked on due to lack of connectivity of the search results component to the modal component. But, after some crazy React Router/Route manipulation (thanks to the help of some TAs), usage of Router history, and Bootstrap modal dissection into its raw parts, it worked out. As I tested the live version of my app on Heroku, I noticed a few more bugs I need to fix :) 

Lastly, I also went to another algorithms lecture tonight hosted by Haseeb, the awesome poker star TA. Today, we learned about string compression, specifically Huffman, ASCII, and fixed length compression, and it was fascinating as usual. I can’t wait to read more about it and try reimplementing what we coded!

AND, that’s a wrap- good night!

[akanshmurthy]

w8d3

It’s almost midway through the first week of final projects! Time is flying by. I focused on getting my newsfeed working with a status form and CRUD functionality for posts along with the use of a cool jQuery plugin called timeago. It was time-consuming trying to figure out how to edit posts in-place so I focused on just create/delete. I also started to mess around with search functionality to see how that would work but didn’t get too far. Finally, I did some styling (which is also VERY time-consuming) on forms and posts. The hardest part of developing this app is trying to figure out on the fly whether something I’m doing that works is still “Reacty”.

[akanshmurthy]

w8d2

Today, we started our final projects! I started off by doing a custom user authentication for my app as well as deploying it to Heroku. Then, I started creating React components, such as a navbar, and styling the app with Bootstrap. I ran into a few styling hiccups that sucked up quite a bit of time. I also realized how different actual code implementation is compared to my earlier design. Relationships between classes, objects, and components also become clearer during implementation. I’m excited for tomorrow, where I will try to finish implementing a newsfeed for my Facebook clone. One trick I learned today was how to manipulate the occurrence of React rendering (one of my components kept trying to render even if I wasn’t at the root page) or Bootstrap styling (I needed certain DOM elements to be contained within a div with a class of container while I needed other DOM elements to be outside) such that it benefited the design of my code. 

[akanshmurthy]

w8d1

One more day before we start our final project! I spent a few hours this weekend coming up with wireframes, design hierarchies, features, and feature timelines. As I started to think about how the app would be designed, I was surprised by how difficult it was to scope it all out before actually doing it. In any case, I hope the planning helps. Today, we continued working on an AirBnB clone to get practice with Flux and React. I hit a bit of a rough patch in one of the sections where there was a lot of refactoring and abstract changes happening. 

[akanshmurthy]

w7d5

And, we’ve reached the end! The end of the formal learning period with lectures, pair programming, assessments, and the like. Today, we started discussing how to scope out our final project, which will be a full-fledged web application using Rails, React, etc. I will be building a Facebook-like web application with a healthcare twist! I’m pretty excited about this and can’t wait to see how it turns out in the coming weeks. This weekend, I will start designing wireframes, determining coding timelines for features on the website, and come up with details, an MVP basis, and more!! Until we start our final project, we are building AirBnB, the website, from scratch.

[akanshmurthy]

w7d4

It was one of those days. One of those days in which you feel like you understand nothing and that your brain is in a haze. The lecture today was about React Router and I had an extremely difficult time focusing/ understanding the lecture material about routing in React. The project cleared things up slightly but I need to revisit routing, especially nested routing, this weekend. 

Tonight, I attended the weekly algorithms Meetup hosted by Haseeb and we learned about what powers git diff and reconciliation in React: edit distance algorithms, including the Levenshtein difference algorithm. I thought the whole concept was fascinating, especially when used with the human genome.  

Lastly, I also got my Asteroids game to finally work after fixing some logic related to the bullet velocity (thanks to a friend of mine at AA!). I’ve given it a Harry Potter twist- hope you can notice it :)

Play it here: http://akanshmurthy.github.io/asteroids/

[akanshmurthy]

w7d3

To expand upon our knowledge of React, we learned about Flux, an architecture developed by Facebook for front end web applications. The architecture consists of actions, dispatchers, stores, and views (our React components). It involves a one-way data flow and results in better performance and sanity when scaling. Here’s a good diagram of what’s happening and what’s involved:

To practice these concepts, we built a Rails app with Flux in it: it was an organ app. Wait, let me clarify- it was a live piano that makes sounds when the user presses on certain keys. It can even record played music! My partner and I almost got the recording part working but this was a tough project as there were so many things to keep in mind while we were coding. Still a fun and cool day!

[akanshmurthy]

w7d2

R^2. React and Rails. Today, we learned how to incorporate React into Rails. We also learned more about lifecycle methods, component design, and deciding whether something is state or props.  The project for the day was actually frustrating as my partner and I were getting stuck on tiny syntactical issues. But, after moving past these issues, we started to get the hang of creating components in Rails, taking form inputs, and performing API requests to fetch/manipulate data in the database. 

[akanshmurthy]

w7d1

I can’t believe it’s week 7 already! We started learning React, which is a JavaScript library for creating UIs recently released by Facebook. And, I’ve got to say, it is quite fascinating. React works by creating a virtual DOM, comparing the differences between the virtual one and the real one, and then updating the the real one with the differences. We built some widgets today using React including one we had done previously with jQuery and CSS (spoiler: the one we did today had less code and was more elegant!) and we built the UI for Minesweeper using React, which was very interesting and challenging at times, especially when trying to remember what "this" was and its scope.

A few interesting facts:

1) React’s view classes are called components

2) JSX is a XML like syntax that makes describing tree structures easier

3) the render within a component can only return one element

Here’s a non-functional example of a React class (the div in return in escaped due to Markdown but there is a div that is enclosing the count state.

var SillyExample = React.createClass({ getInitialState: function() { return { count: 0 }; }, addCount: function() { this.setState({count: 1}); }, render: function() { return(

{this.state.count}

); } });

[akanshmurthy]

w6d5

Today was a really cool day! Besides the assessment on JavaScript (which wasn’t too bad- a few silly mistakes but how else can one learn?), we learned about AJAX and how to use jQuery AJAX calls to make asynchronous requests to a server and add content dynamically to the DOM without refreshing the page. I have to say that after looking at JavaScript’s AJAX syntax, I began to appreciate how simple jQuery makes AJAX:

$.ajax({url:"/cats/1.json", type:"GET, success: callback(response)});

Our project involved implementing various AJAX calls within callbacks of event handlers. All in jQuery. We were able to do some cool things like make comments on posts appear magically as they were added without refreshing the page. We also were able to get a search box to show available objects in the database as we typed letters. COOL!