rails

All posts tagged rails

SolidusConf 2017

I am very proud to say that I was a chosen speaker at this year’s SolidusConf.  Solidus is an open-source eCommerce platform written in Rails. We use it at DeseretBook.com and contribute actively to the project. Below is a transcript of the talk as well as my slides. They say the video will be released soon and when it does I’ll post it here. I think the transcript will read better than I presented it so start there. Before we get to all of that I would like to thank my wife for all of her love and support, Greg Price for the topic idea, and Ashton Herrmann for editing and proof reading. They really made this thing come together and without them it wouldn’t have been nearly this good.

Link to Talk

Link to Slides

Keep your store fresh with an API-based CMS

Introduction

Hello. I’m incredibly happy to be here and excited to tell you about API-based CMSes for your stores. We’ve seen incredible improvements to our sales, advertising potential, and quality of life from these changes.

My name is Eric Saupe. I work for Deseret Book, a book publisher focused on selling Christian and Latter-day Saint products and founded in 1866. We have over 20,000 salable variants including digital products like ebooks and audiobooks. Those products are sold in our 45 retails stores and authorized reseller locations as well as online. We have an e-reader app called Deseret Bookshelf for iOS and Android, and we just launched a subscription service for unlimited access to our audiobooks and over a thousand ebooks. All purchases for Deseret Bookshelf happen through our Solidus-based DeseretBook.com, and our online orders for physical products are fulfilled through our own warehouse, which runs on Oracle and Logpro.  Our physical products include books, art and home, jewelry, and clothing. Hopefully that gives you a small glimpse into the breadth of products we sell and services we have to communicate with through our Solidus store.

Scipio

Let’s talk about our road to API-based CMSes. In the beginning DeseretBook.com was a totally custom Rails app without any sort of open-source e-commerce gem installed. Our marketing team has a really long tail of products to choose from, but unfortunately, the home page was really the only place we had marketing options available. Every time they had new product to advertise, they would send us, the developers, the requested changes: new images, new copy, etc., and we would plan that into our sprint and spend developer time to update the homepage and release for QA before finally deploying to production.

The other trick was scheduling deploys. Since they would often be advertising sales on the homepage, we would need to make sure a developer was ready to deploy at midnight to ensure the sale turned on and off properly.

I’m sure a lot of you have experiences that are probably pretty similar to that. Back then, whenever there were storewide sales, we would create a Category of productsa category is what we would now refer to as a Taxonand place all of their Sale Products in there so they could link to that in their emails. I actually like that approach, but you can see how time consuming all of this would be.

On our homepage there was a Top Ten list that was somewhat automated albeit misleading to the consumer. It took all products sold in the last two weeks and figured out which ones gave us the most revenue. So it really wasn’t the most “popular” since we could have sold a single $2,000 painting and 600 $3 bookmarks and the single painting would be more “popular” to the end user.

It wasn’t all static though; we did use Adobe Target to selectively inject some neat things to users but only in a couple of places. At the top of the page under the navigation we could add messages to the user about sales or site updates. That was more or less all we had as far as tools go for the marketing team. Everything else was done by hand by either the marketing team with their Category pages or with the help of the developers manually updating the homepage.

Nibley

As DeseretBook.com grew it became apparent that our custom Rails app was just way too hard to maintain with the number of requests for features and bugs that were coming in. That’s when we started looking at open-source solutions and found Spree. It sounded like a great deal: we take advantage of open source software to help us maintain the e-commerce platform of the site while we figure out how to make it communicate with our warehouse and e-reader API. Simple enough. As part of this upgrade, we were going to give more tools to the marketers to control more of the site. We wanted them to be successful in their jobs, selling all of the different products we offer.

With that we let Adobe Target control all sections of the homepage. Images, text, and links were all given to Adobe Target to allow marketers to update whatever they like. This was pretty good in theory, but it had a lot of negatives in practice. For one, if Adobe Target was down, the homepage was empty. Also, many ad-blocking plugins blocked Adobe Target data entirely because it was requested from the client rather than the server. Our client base is not really likely to use ad-blockers, but as developers and for our more tech-savvy users, the homepage was basically blank. There was no default content served from the site itself; it all relied on Adobe Target.

This gave us a few ideas to improve and iterate on, though. It allowed for A/B testing, which led us to find that a curated Top Ten list outperformed the existing automated one. The marketing team also loved having more control over when homepage updates were released rather than relying on our busy schedules to squeeze in development and deploy times. But the flaws of Adobe Target were too much, and it was clear we needed to phase it out at the end of our contract.

What Then?

With Adobe Target on its way out the door we had a chance to reflect on what it was the marketing team really needed. Obviously, they wanted to update the homepage regularly and add content to other parts of the site like during checkout and just under the navigation, and they wanted scheduled releases.

So what were our options at the time? We could build custom tools for them right on top of Spree, but then we would need to maintain the new database tables, bug fixes, and still have deploys for those changes. As developers we wanted something with minimal maintenance that the marketers couldn’t mess up. That may sound harsh, but with Adobe Target they were given the power to drop in entire blocks of Javascript, and if there were errors in that Javascript, the pages would break. That’s when we found headless CMSes like Contentful and Prismic.io.

Headless CMS

Let me just quickly define what a headless CMS is so we can all be on the same page. A headless CMS is a content management system (CMS) that isn’t directly tied to your application. You can think of it like the WordPress admin interface except it isn’t directly attached to your site.

A headless CMS gave us the low maintenance backend that we wanted. It maintains the database and the service for you. It provides the GUI for users to update data, and it will integrate with all of your applications because the data is returned as a JSON object. Many of them also have gems to get up and running quickly. Their GUIs are great for non-technical people, giving them WYSIWYG-type editing that they can save and collaborate on before publishing.

Marketers are in charge of publishing, leaving the developers to focus on developing new features and fixing bugs. We didn’t want to store marketing data in our database because that would add unnecessary complexity and maintenance onto our small team. Outsourcing our marketing data management and publishing to an API-based CMS allowed us to focus on growing the business and let the marketers move more quickly without having to wait for developers to start selling product.

Prismic.io vs Contentful

There are a number of headless CMS options out there, but we narrowed our options down to Prismic.io and Contentful. Contentful is definitely the larger organization, but Prismic was less expensive and offered scheduled deploys and previewing, which our marketing team really wanted. Ultimately we chose Prismic. The rest of the talk will be focused on how we integrated Prismic into our site, but the same principles can be applied to any headless CMS.

The Approach

During this time we were actually rewriting our site again after switching to Spree. In our zeal to keep our new Spree site functioning like our legacy site, we customized Spree too heavily and ended up running on our own fork of Spree, effectively eliminating the benefit of an open source community. Our team decided the best course of action was to start fresh with a Solidus-based site and pull over only features and code that were absolutely necessary.

This was also a great time to implement a new Prismic marketing change, and so we began talking with the marketing team about exactly what would be useful to them. We came up with a few components they wanted to use around the site like sliders, hero banners, mini banners, carousels, multi-item carousels, and headings. Knowing what kinds of content they wanted to place around the site, we simply needed to constrain those elements in a way that was both predictable for the site and simple to create and update for the Marketers.

To accomplish that, we created Content Schemas in Prismic. These house all of the data about your component, things like name, product ID, display type, etc. I’ll go over an example of one of these components here.

This is the Content Schema for a multi item carousel. First we see that the Component is a Carousel with the tag  “Multi item,” which helps distinguish between two or more types of the same component. Then each item in the Carousel is displayed with data about it: product name, description, custom link, button text, product SKU, and a custom image. Marketers can quickly update information that is specific to this Carousel without changing any data in our storefront. To identify where to place these components, we use Prismic’s tagging system with defined tags to be pulled into specific locations in our store. For example, anything that needs to appear on a specific taxon page is tagged with the taxon slug like “art-and-home/framed”.

Once the schema is set up and a component created, the site needs to pull in that data from Prismic and display it. We do this by making a call to their API and fetching documents related to a tag based on the page we are currently on. For taxon pages, we pull documents tagged with the current taxon’s slug. Now we have a JSON object with documents that should be rendered. Since this is just JSON and not HTML, we create partials to translate the Prismic data into something more meaningful.

This is our partial for carousels on our site. It handles both single-item and multi-item carousels and renders differently based on the type returned from Prismic. Here is where we are ensuring that the way things are rendered is consistent and within our predefined guidelines. However, in order to encourage a pattern of controlled content entry for flexible content presentation, Prismic does not allow for raw HTML. In our case we are going to handle all the HTML rendering based on the fields entered in Prismic.

Custom names, descriptions, and images are rendered from what was input in Prismic, but we also give the option to simply put in a SKU and handle the rendering from within the store. At Deseret Book we rely more heavily on Variant SKUs than anything else, but you could just as easily use the Product or Variant IDs to specify an individual product you wish to market. This makes life easier because custom data is not required, and it allows the site to consistently render the proper link and image.

Now that you have an idea of what an individual component looks like, let’s take a look at our big project of allowing Marketers to update the entire homepage from Prismic. Each section of the homepage is a different document housing many components. We have our top section, which has a hero banner and mini banners; our left section with carousels, single item spotlights, and headers; and our right section with our curated Top Ten list and some single-image components.

The home page looks exactly the same as it did before we implemented Prismic. Because everything is just a partial in Rails, we were able to match our current site without problem, and we also maintain consistency throughout the site since every Prismic component will render the same way on every page. Hero banners on taxon pages look the same as the Hero banner on the home page.

Results

After converting our entire site to Prismic, we actually saw faster load times because Prismic compresses files for us that previously weren’t being compressed properly. Ad blockers no longer stopped portions of our site from rendering because the server was the one making the request for marking data rather than the client. And we can now cache those pages to make rendering even faster, although the one caveat to that is each page still needs to make a call to Prismic to ensure it has the latest version of the site. If their API is down or stalls, it can add loading time. We wrapped our calls to Prismic in a rescue and cached the old Prismic ref. If there is a problem with the call to Prismic, we just load the currently cached version of each page.

We also integrated Prismic into our mobile apps, and it is now the central location for marketing across all of our sites and allows marketers to quickly make updates and changes to our web and mobile apps. This saved a lot of money in possibly getting another solution that focused on just mobile in-app marketing.

Demo/Gem

To finish up I wanted to do a really quick demo where we will actually edit our site, do a preview of that edit, and publish it so you can all see how that flow looks.

Here in Prismic I’m editing the home page section to change an image. I can save it up here, then we can preview it on the site, live. Once I’m happy with it, we can either schedule a time for it to be published or just publish it right now. In addition to scheduling a time, Prismic allows you to create releases, which lets marketers work on an entire series of changes and lump them into a single event that will all be published together. Last year they used it with great success for the 12 Days of Christmas sales we do. As you change and make edits to documents in Prismic, it will keep track of the differences. You can even fork different items to make changes just like Git.

I’ll publish it now. We’ll go back to DeseretBook.com and you can see my change is now live.

To help you get started with all of this, I am announcing two gems, one for Prismic and one for Contentful that will plug into Solidus. Included in those gems are starter templates for basic marketing components. We have loved everything about what Prismic has given us, and I really hope you’ll consider using an API-based CMS to enhance your store too. Thank you.

Getting Started with Programming

y83Je1OC6Wc

A friend of mine called me up recently to ask me how to get started with programming. I’ve gotten these requests more and more as the demand for programmers rises. I’m going to compile a list of resources to help anyone get started with what I feel are the basis for what anyone who wants to program will need. This list is by no means comprehensive and while this will get you started you should not feel like you can go from knowing nothing to building the next Facebook simply by following this guide. It will, however, give you a solid foundation with which you can build and grow to the point where you could potentially build something like Facebook or Instagram on your own or working with a small team.

Which Language Should I Learn?

This depends entirely on what you are trying to do. Some people want to make their work life more efficient by writing small programs to automate their daily tasks while others may want to create websites and web applications. For the first I suggest Python. It is easy to pick up for beginners, it forces good code formatting, and it can be extended to do a large amount of things including creating large websites and applications (Instagram runs on Django which is a web framework built on Python). If you really want to write web applications or create interactive websites I would recommend learning Ruby on Rails. I have written web applications in both languages and I am far more effective in Rails thanks to their mantra of “Convention over Configuration”. I’ll be writing a post about why I feel Rails is better than Django later. Pick your language based on your goals and read the online books I have linked below. They will help you set up your computer and teach you how to create very simple programs for you to have a good base of understanding for programming.

Great Starters Guides

Code Editor

You’ll need a program to actually write the code. I personally suggest Sublime Text 3. It is free, light-weight, and can edit any type of programming file. It has a lot of neat extensions and themes so you can customize it to fit your needs.

Learn Git

Once you have picked your language of choice, no matter what it is, you’ll want to learn Git. Git is a tool to help you version your project and files. Versioning is similar to saving but gives you specific moments to return to. Let’s say you are working on a Word document. You start writing a lot, hit save, then you write a bunch more but decide you hate all that and want to return to where it was when you hit save initially. You could hit CTRL+Z a bunch but it would be nicer if you could point to a specific version of the file and say “I want to start from there again.” With Git you can do that. You make commits, marking moments in time, with messages about the changes made. If you ever want to go back you can simply rollback to any previous commit undoing your current changes. This is useful when you have a working program and then start to do some complicated work only to find you have totally screwed up the project. Just roll back to when it was working and start again.

Github

While you can use versioning locally for your small projects you really start to see its true power when you make your software available for others to review and help; this is known as open-source software. Create an account on Github and they will guide you in pushing your local git versioned projects into projects that anyone can see and help you with. Don’t be afraid of others seeing what you might consider “bad code”. The point of doing this is so others can help you learn and progress. When you have a larger project others can write features and submit bug fixes for your code as well. Once you have a firm grasp of whatever language you have chosen you can even write code for other open source projects to help them with their features and bugs.

Conclusion

Everyone should learn a little bit of programming just like everyone learns a little bit of math. Obviously we can go very deep into mathematics and we can do the same with programming but everyone should have a grasp of the basics and have a foundation even if you don’t do it professionally. I hope this guide was useful and let me know if you have any questions or concerns in the comments below.

rails

Rails 5

As has become tradition, a new full version release of Rails is coming just two years after the release of Rails 4. This new version progresses the platform by bumping the underlying minimum Ruby version and adds a slew of neat features to keep Rails feeling fresh and new.

Ruby 2.2.2

Ruby 2.2.2 is required in Rails 5 because Rails 5 will take advantage of the new Symbol Garbage Collection found in Ruby 2.2. There is also rumor of Rails 5 using the Incremental Garbage Collection found in Ruby 2.2. They have decided to use Ruby 2.2.2 since Ruby 2.2 had a major security vulnerability that is patched in 2.2.2.

https://github.com/rails/rails/pull/19257 Ruby 2.2.1 PR

https://github.com/rails/rails/commit/32f7491808d2c4e097ed7b3ee875e4d1cea8c442 Ruby 2.2.2 Commit

Rails API

Many Rails developers these days are finding themselves using Javascript Frameworks more and more. Whether DHH likes that or not it’s a fact of life. Before Rails 5 developers turned to the ruby-api gem which helps create a minimalist Rails application specifically for use as an API. This functionality is now going to be wrapped up and packaged with Rails 5 so no need for another gem. Just use the command rails new <application name> --api and Rails will create your new API app all on its own!

Here are a couple of tutorials for you Backbone and Ember users.

https://github.com/rails/rails/pull/19832

Turbolinks 3

Turbolinks has been a part of Rails since Rails 4 but is getting a major update to hopefully make developers happier about using it. Turbolinks has been criticized for having major usability problems but the concept of only loading portions of the DOM that change is a sound idea. Many Javascript Frameworks take advantage of this idea specifically React.js. Turbolinks will fetch the body content of your page without worrying about rerendering the CSS and Javascript. You can opt-in to specify which parts of the page should be changed if you’d like as well. They also added a progress bar by default to help the user see things are happening behind the scenes, but with the increased speed you hopefully won’t need that.

https://github.com/rails/turbolinks

Action Cable

Action Cable is the feature I am most excited about. Simpler web sockets for Rails. Anytime anyone says web sockets to me I cringe a little just because of how complicated they can be to set up. Many have tried to make the problem easier and Action Cable is Rails’ way of giving it a try.

https://github.com/rails/actioncable

Rake or Rails

The beginner’s dillema, do I use rake db:migrate or rails db:migrate, is it rake test or rails test? Doesn’t matter anymore, it’s all rails. From Rails 5 on the rails command can be used to run rake commands. Simple change but a nice one.

https://github.com/rails/rails/issues/18878

Integration Tests

Rails 5 is beginning a push to deprecate Controller tests all together in favor of Integration tests. As part of that they are deprecating assigns() and assert_template in controller tests. Aaron Patterson has a great keynote from Railsconf where he outlines the speed improvements made to the Rails testing environment and why Integration tests will be the way to go.

https://github.com/rails/rails/pull/19058

Update

I gave this presentation to the SLC.rb user group July 28th, 2015 and here are the slides from that presentation in case anyone is interested.

Rails 5

A lot of other under the hood improvements are expected to be made but I think I covered a lot of the major upcoming features. Let me know if you have any questions or which Rails feature you are most excited about by leaving a comment below.

rails

One of the great strengths of Rails is the ability to create layouts that house various views of content. You create a layout with a basic HTML structure and then simply drop in your new content based on the view you are rendering. One of the simplest layouts is one that just renders the view that takes up the whole page and this is accomplished by the auto generated
app/views/layouts/application.html.erb.

The highlighted line is the important one. That <%= yield %> tells Ruby on Rails that whatever view you load just drop it right there. That’s great! Now we have a simple base layout that houses our imports and basic structure and CSS and we simply drop in our own content inside of this.

Let’s say we want to take it a step further. What if we want a left and a right side bar which is unique to each of our views? We just need to change our basic layout a little bit to add those columns and then update our view template code to take advantage of our new structure.

Yield Sections

app/views/layouts/application.html.erb

app/views/MODEL/new.html.erb

Following the suggestion of Obie Fernandez and Kevin Faustino in their book The Rails 4 Way, I have placed the two named structures of the layout first. It makes it easy to distinguish what the smaller sections will contain before getting to the meat of the content. Everything that isn’t labeled as content_for will be dropped in that unnamed yield in the layout.

Render Partials

That’s all well and good but what if you don’t want a specific set of sidebar content for every single view. Maybe a shared partial for the right bar will work great. In that case you’ll need to use the render method in your template to generate the template for you. Here is the example from above but using a shared right side bar template.

app/views/layouts/application.html.erb

app/views/shared/_right.html.erb

Render Partials with Variables

You can even pass in variables to your partials. Let’s say our right side bar takes advantage of some user data. We just pass the user variable to the render with a comma and a hash type variable being passed.

app/views/layouts/application.html.erb

app/views/shared/_right.html.erb

Pretty cool, right? I hope this introduction to layouts and partials was helpful. If there are any problems with my examples or if you have any questions please feel free to leave a comment below.

Installing Rails on Mac OSX

rails

When developing for Ruby on Rails the first thing you’ll need to set up your development environment. This guide will be for installing things on Mac OSX and would be similar for Linux. These are my notes from experience setting up a Rails environment based on The Rails Tutorial by Michael Hartl.

New Rails Installation on OSX

Install Git

Checks if git is installed and if it isn’t it will install it

Install Ruby (Already installed)

Checks Ruby version, already installed on OSX

Install RVM

RVM is for multiple Ruby on Rails environments for different projects.

Install RVM Requirements

NOTE: RVM tries to install gcc46 which is an older version of gcc on OSX. Mavericks already has gcc installed so install the list that appears except gcc. It also can install but take a VERY long time so just be patient and see.

Tell RVM where OpenSSL is

Create .gemrc

This file stops the installation of Ruby docs, the text below goes in .gemrc

Install Rails

You should be ready to create your environment and install your Gems. If I’ve missed anything, or you have problems, let me know in the comments below and I will update this list.