Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Tony McKeown
Courses Plus Student 14,300 PointsTurning Treebook into a single page application
Has anyone attempted this?
I'd like to add tabs to the profile page and allow the user to be able to browse (and interact) through the different sections such as friends, photos, statuses etc without leaving that person's profile.
Could you convert the original application easily? Or would it need to be something that was designed from the very beginning?
2 Answers
Dino Paškvan
Courses Plus Student 44,108 PointsHi Tony.
Converting Treebook into a single page app is certainly possible. If you're familiar with the way single page apps work, it's not even that complicated.
Most single page web apps will render a view and then load any additional content through XMLHttpRequests (AJAX requests) upon user actions. That data is fetched and rendered by JavaScript. It usually arrives in the form of JSON.
If you go looking through the code of the Treebook application, you might notice that some files mention rendering JSON.
For instance, the statuses controller mentions responding to JSON and if you check the views folder for the statuses, you'll see files with the .json.jbuilder extension. You can use those to edit how the JSON is rendered. In fact, because the statuses have been generated through scaffolding, Treebook will already serve JSON at /statuses.json (this will return an error at first because index.json.jbuilder references :name, something that doesn't exist, so once you remove that, it'll render all the statuses as JSON).
To truly turn Treebook into a single page app, you'd make sure that all the resources and user information and whatever else the app serves as HTML is served as JSON.
Then, you'd be able to load that data and dynamically update the pages without a refresh.
I hope this helps and guides you in the right direction.
Tony McKeown
Courses Plus Student 14,300 PointsThanks for both of your answers. I must admit that it sounds a bit daunting as I'm not that great with JavaScript but you've both given me things I need to look into for a starting point such as the gem recommended by Kevin.
I'll have a look through the statuses videos and I think the friendship videos to try and refresh my memory as it was quite a long time ago that I actually completed those sections, do some reading on the processes mentioned above and go from there.
Kevin Lozandier
Courses Plus Student 53,747 PointsKevin Lozandier
Courses Plus Student 53,747 PointsWhen it comes changing the Treebook to a single page app, I highly recommend using active model serializers.
It'll make things a lot easier to render your models in json. It's important to use head and all the status codes ideally with an api namespace and versioning subdomain to make it scalable and intuitive for people to interact with the app.
For versioning, you can also thinking about custom datatypes instead of namespacing your api versioning through your routes.
When it comes to your choice of a JavaScript Model-View-Controller framework, make sure you have a thorough understanding of manage the framework's concept of a data store for optimal caching and fetching. .