All posts by Corey Martin

Why React JS matters for developers

It can be tempting to think of React JS as just another JavaScript framework, along the lines of Angular JS and Ember JS. This entirely misses why it was created and the problems it solves.

React is not designed to solve problems specific to web applications. Rather, it is designed to solve problems for all applications.

This sounds like buzz until you look at where React is going. Its first uses were in web applications, specifically Facebook and Instagram. Now, though, it’s rapidly moving past that:

  1. Facebook used it to build a native iOS mobile app, and is open sourcing react-native to allow anyone to do the same for iOS and Android. Learn more from Facebook’s recent React conference: overview, deep dive.
  2. Flipboard used it to power canvas graphics on its web site, which unlike the traditional browser DOM can operate with video-like smoothness. They open sourced this add-on to React.
  3. Netflix uses it to create TV interfaces. Hear about it in their own words.
  4. It’s used on both the server-side and the client-side. React doesn’t need a web browser to work.

Why is React gaining traction on so many platforms, unlike other JavaScript frameworks?

It’s simple: React presents a better model for development, generally.

React’s impact is best explained by its side effects:

  1. Your code is clear. It is arranged into components, each with its own defined responsibility.  Learn more about structure.
  2. Your app is predictable. It’s very clear where data flows, and what happens when a user does something. Learn more about data flow.
  3. Your app is fast. React is really, really fast, creating a better experience for users, even if you have a ton of data. See this example.
  4. Your app is standards-based. React adds layers only when it needs to. You feel like you are actually writing JavaScript and HTML, not some magic template language.
  5. Surprise, you’re an app developer. React breaks down barriers across platforms, by applying its same model across the board. This means that once you learn the React way of structuring an web application, you have a huge head start on developing a native iOS or Android app, thanks to react-native. Surely this will happen to other platforms.

So, get to know React, even if you don’t see a need for it in your current projects. Far more than a shiny new JavaScript framework,  it could represent a new standard for structuring applications.

See also, the benefits of adding React to a real-world Rails app, and a deep dive into React in Rails.

Finally, check out the React JS Conf 2015 videos.

Sitemaps in Rails, in five minutes

Not every web app needs a sitemap, but in certain cases having one can significantly improve your visibility on Google.

For instance, you might have pages that are hard to find, or that you haven’t entirely exposed to the public. You might be a brand new site that wants to get indexed as quickly as possible.

Read over Google’s reasons for having a sitemap. Take it from the authority on the matter, the ultimate “SEO expert.”

If you’re on the fence, go with a sitemap. Google states that “In most cases, webmasters benefit from sitemap submission, and in no case can you be penalized for it.”

Don’t you love the word “webmaster”?

Adding a sitemap to a small-to-medium size Rails app is a breeze. Here’s the how-to:

Step 1. Create a view for your sitemap

Your sitemap is going to be a plain old Rails view, albeit one in XML format. Below are examples in HAML and ERB.

HAML (haml-rails gem required):

A couple of important notes:

  • We’re using the post_url helper, not the post_path helper, because we need absolute URL’s in the sitemap.
  • Obviously, replace post with whatever model(s) holds the stuff you want in the sitemap.
  • If your site heavily features images and videos that you want indexed, add media metadata to your sitemap.

Step 2. Create a controller

The view above uses the @posts variable. It needs to get that from a sitemap controller:

Step 3. Add a route

Step 4. Test it out

This very simple test ensures that the sitemap is basically working, and exists mainly to ensure it doesn’t get broken in the future.

For real sitemap validation, see the next step.

Step 5. Test your sitemap and submit it to Google

Register your site on Google Webmaster Tools.

From there, you can validate and submit your sitemap for crawling.

At the end, you should see a count of the URL’s in your sitemap. You’re done!

Sitemap submission confirmation

Alternatives

The sitemap above is generated on-the-fly as search engines request it. If your site is particularly huge, you could generate the sitemap on a schedule. This certainly complicates things, but there are gems to help: sitemap_generator, for instance. I evaluated these but found they added too much overhead to the deployment and maintenance processes for a medium-size app.

Inspired by this Stack Exchange answer

React JS and Flux in Rails, a complete example

I recently wrote about real-world results with React JS. Here is a concrete example of adding React to a Rails app, start to finish.

React JS is a library from Facebook that powers user interfaces. It is simpler, faster, and less opinionated than many JavaScript MVC frameworks, making it easier to bring into an existing app. Start by reviewing our recommended React resources, then check out an example below.

The example

At Cook Smarts, we want recipes to be consistent, so we provide administrators with suggested ingredient names. That way, a red bell pepper is always called a red bell pepper.

Suggestions are populated from previous recipes automatically, but they need to be pruned by an administrator to make sure they’re accurate.

The app needs to provide an Excel-like way to quickly prune suggestions.

React JS, in under 150 lines of readable code, gets us exactly what we need, an Excel-like data editor.

Editing ingredient suggestions

Tooling

The example below relies upon Ruby on Rails, the react-rails gem (latest stable version), and Fluxxor (added to the app’s JavaScript manifest).

Our server actions in Rails

A Rails controller provides JSON data to the view and processes edits and deletions to the database.

Our data model in Fluxxor

A typical React implementation includes a data model, or store, which manages data and the actions that can be taken on the data. At a Cook Smarts, we use Fluxxor,  inspired by Facebook’s Flux concept.

A JavaScript object holds our store and defines the actions that the store will take (renaming and deleting ingredients):

The object contains the store itself, instantiated through Fluxxor’s createStore method.

The object also contains the store’s actions, which communicates with the simple API we defined in the Rails controller:

Finally, the object includes a method for creating a Flux object containing the store and its actions. The Flux object is passed to the React-based UI in the next section.

Read more about Fluxxor and how it helps you easily define data models that play well with React. For more on the concept, check out Facebook’s Flux overview.

Our UI in React

So far, we have covered the server-side API and the client-side data store. We still need to build our client-side UI, and that’s where React comes in.

React apps are basically component trees. The ingredient suggestions editor contains multiple ingredient suggestions,, so our component tree at its simplest is:

  • IngredientSuggestionsEditor
    • IngredientSuggestion
    • IngredientSuggestion
    • IngredientSuggestion

The IngredientSuggestionsEditor component is the parent, and watches the Flux store for any changes (see code comments):

The component above renders an IngredientSuggestion component for each ingredient. The IngredientSuggestion component shows the name of the ingredient and allows the user to edit it (see code comments):

Tying it all together

All of the code above is in a global JavaScript function that we call from our Rails view.  That function spins everything up and renders the UI to the page. Global functions aren’t ideal, but Rails’ asset pipeline leaves us with few other options. While a bit inelegant, this approach works well in a Rails app.

The global function creates the Fluxxor store and renders React components to the page. Here is its code, excluding the snippets we’ve already covered:

The Rails view containing the suggestion editor runs the global function on page load, passing all the ingredient suggestions in JSON format, which we passed to the view from the Rails controller:

Here’s the full code for the Rails controller, Rails view, Fluxxor store/actions, and React components.

In the future it will only get easier to connect React and Rails, with a new 1.0 version of the React gem in the works. At Cook Smarts, we use the latest stable React gem and include Fluxxor in the app’s JavaScript manifest.

React allowed us to get a client-side interface up and running in a couple of hours.  React presents few surprises and operates consistently. It’s no wonder that it powers much of Facebook and Instagram, two sites that have to work for a wide array of users.

Avoid the N+1 problem in Rails by harnessing your database

The #1 cause of slow apps may be the N+1 problem, where the app queries a database over and over again to get information about a list of items.

To avoid this, learn the powers of your database so you can query it more efficiently.

Say that you have an app to manage meetings. When someone creates a meeting, there is a standard checklist that they must complete.

The standard checklist items, which are the same for every meeting, are stored in the Checklist table. When someone checks off an item for a particular meeting, that action is stored in Checklist Checked Items table.

Here is the database structure and the sample records we’ll use in this example. For the only meeting in the database, the user has completed two of the checklist items.

meetings

  • id: 1, title: A Meeting

checklist_items

  • id: 1, title: Book meeting location
  • id: 2, title: Arrange catering
  • id: 3, title: Invite people

checklist_checked_items

  • id: 1, checklist_item_id: 1, meeting_id: 1
  • id: 2, checklist_item_id: 2, meeting_id: 1

Say you want to retrieve, for a given meeting, the checklist items and whether each has been checked. You want any checked items to appear at the end of the list.

Here is the app-centric way to do that:

  1. Query the checklist items
  2. Loop through the checklist items, and for each, query the checked items to see if it’s been checked for that meeting
  3. Place each of the items, and whether it’s been checked, in an array of hashes
  4. Sort the array of hashes to place checked items last

This is inefficient and presents the N+1 problem, with step 2 producing multiple queries that will only increase in number as your app grows. Furthermore, there is an unnecessary array middleman and a sorting operation on that array.

Here is the database-centric way:

  1. In one query, get the checklist items, whether each is checked, sorted by whether each is checked.

That’s right, one query has replaced many, and the databsae is doing all the work.

The secret lies in Postgres’s CASE function, which lets you insert conditional logic into queries.

Here, we join checklist_items and checklist_checked_items a checked field that shows whether the checklist item is checked for that particular meeting:

Or, using ActiveRecord:

This returns the checklist items and whether they’re checked, with checked items last:

  • title: Arrange catering, checked: false
  • title: Invite people, checked: true
  • title: Book meeting location, checked: true

By understanding Postgres’s CASE function, we were able to replace many queries with one, speeding up our app.

This is just one example of how your database can take the burden and handle it better. Read your database’s documentation to discover more.

Further reading:

React JS and Rails – real-world results

There are many React JS intros out there, but too few articles about bringing React into an existing Rails app.

At Cook Smarts, we brought React JS into the core of our application, used by thousands of people each week. We moved quickly from the conceptual beauty of React to figuring out how to make it work 100% of the time.

Here’s what React JS delivered in just a bit of time:

  1. A bug-free user experience back to IE 7
  2. Speed, with no detectable latency on the client side
  3. Better structured JavaScript
  4. Thrilled users, who now have a more modern app experience
  5. Developer happiness (that’s me!)

First, some background. Cook Smarts is a service that helps people plan their weekly at-home meals. It suggests meals for the week, and the user can choose which ones to make, add meals from other weeks, adjust serving sizes, and adjust for dietary restrictions.

This is a lot of user interaction. A month ago, users selected which meals to make through a vanilla form. We then generated a static grocery list and meal plan. If they wanted to make any changes, they had to submit the form all over again.

Screen Shot 2014-12-29 at 6.30.05 PM

Screen Shot 2014-12-29 at 6.31.14 PM

It worked, but it needed improvement. Users wanted the app to remember their choices and allow them to check items off the grocery list. They wanted to make their selections as they browsed, not all at once.

We chose React JS because it is un-opinionated and friendly to existing apps. We could drop React into particular parts of the app without changing any other parts.

After implementing React, the meal planning experience is this simple, with no forms:

CookSmartsMealPlanning

React is based on components that you arrange in a tree that basically documents itself. Here are the basic components for grocery list page:

  • GroceryListContainer
    • GroceryListItems
      • GroceryListItem

… and for the menu page:

  • DaysContainer
    • Day
      • DayTitle
      • DayVersion
      • DayServings

With React, you code each component separately, in a mix of JavaScript and HTML called JSX. Your component code contains the layout and behavior of that component, and React makes everything happen on the client.

React has minimal impact on your Rails app’s overall structure, making it easy to bring into an existing app. Here were the basic steps to implementing it:

  1. Add react-rails to your gemfile
  2. Create a directory in app/assets/javascript called “components” and create your components there as .JSX files
  3. Reference your new components in your views
  4. Create the server-side API’s necessary to feed and interact with your React components (this is not React-specific, just something an app needs to do as it implements more client-side functionality)

I presented to a local meetup about the process of implementing React for Cook Smarts, and hope to put together a how-to soon. In the mean time, check out these great resources for incorporating React and Rails:

Feel free to tweet me with any questions!

Update: See a full example of adding React to a Rails app

User announcements for Ruby on Rails with the Starburst gem

If you have an app with users, chances are you need to make announcements to them from time to time.

Starburst allows you to show messages to logged in users within your Rails app. Once the user closes the message, they won’t see it again.

You can target messages to particular groups of users, based on their database attributes or your own methods on the User class. For instance, you might send a message only to users on your premium plan.

Starburst remembers on the server who has closed which message. Therefore, a user who closes a message on their desktop won’t see it again on their mobile device. Starburst doesn’t use cookies, so a user won’t see an announcement they’ve already read if they switch devices or clear their cookies.

Starburst is in production on Cook Smarts, where it has served announcements to thousands of users.

Find out how to install and use Starburst on its GitHub repo, and post an issue there with any feedback!

11 Essential Services for Rails Apps

Developing an app is never a solo effort, even if you are the only developer in a company. We live an ecosystem of services and open source tools that make development more rapid than ever before.

This article covers services and tools that are critical to most modern web applications.

1. Error handling

You need to be aware of any exceptions that occur in your app in production, as they generally indicate bugs.

Honeybadger

Recommended. After you take five minutes to set up Honeybadger, it will alert you to any errors on your app, and allow you to easily browse through each time that error happened. Information with the error will generally tell you who was logged in at the time, so you can provide proactive support to your users.

Airbrake

Airbrake may be the dominant error reporting service, as it just acquired its competitor Exceptional. From my experience, Setup is not as simple as Honeybadger’s, and the interface is so minimal that browsing through the history of an error can be cumbersome.

2. Commerce

Stripe and Braintree offer customers a seamless purchase experience in your app, allowing you to sell one-off items and subscriptions. Both are customizable enough to be transparent to the customer, providing you with full control over the user experience.

Stripe

Recommended. Stripe is extremely developer-friendly on its own, so can be used in quite a custom manner in your Rails app. Unless you use a Stripe partner, you will be writing custom code to interface with Stripe. Stripe Checkout can shave off time off front-end development.

Braintree

Recommended. Unlike Stripe, Braintree offers PayPal integration and phone support. It has matched Stripe’s features including user interface elements that you can plug right in to your app. As of October 2014, Braintree is offering no transaction fees on your first $50,000 of transactions, which could save you around $1,500. Braintree has made Stripe less of a default choice than it was before. Be sure to compare both.

3. E-mail – transactional

Transactional e-mail is specific to a customer. It may include an invoice, an alert about the customer’s account, a summary of the customer’s recent activity, etc. Generally, the contents of a transactional e-mail is different for every customer.

Mandrill

Recommended. From the creators of MailChimp comes an extremely powerful service with generous pricing. Just plug in Mandrill’s SMTP information into Rails ActionMailer, or use Mandrill’s API to send a ton of messages at once. Mandrill offers robust logging, allowing you to see the full contents of recently sent messages. Its deliverability stats demonstrate MailChimp/Mandrill’s excellent record in getting e-mails to people. It is reliable and fast, churning through thousands of messages in just a few minutes (from my experience). Finally, it is free under a certain message limit, and very reasonable thereafter, particularly for MailChimp customers. Many apps will spend just a few bucks a month on Mandrill, if that.

Having transitioned a web app from Sendgrid to Mandrill, it is difficult for me to recommend anything other than Mandrill. Do check out SendGrid and Mailgun, though.

4. E-mail – mailing list

You may want to send all of your users, or particular subsets of them, updates on your service, promotions, and other marketing e-mails.

MailChimp

Recommended. MailChimp has strong libraries for Ruby and other languages lets you add, manipulate, and remove users from your lists easily. You can send custom information about your users, such as which plan they are on, to MailChimp, for targeting purposes.

Customer automation tools

Many apps have needs beyond simple mailing lists. You may want to segment customers based on their behaviors – for instance, reminding a customer to take a certain action if they haven’t already. Check out MailChimp’s newly revamped automation features.

If you need more advanced customer segmentation, check out AWeber and Infusionsoft. Other specialized offerings, like Drip, address niches like e-mail-based courses. With these three tools, be prepared to pay more for a small list than you would with MailChimp.

5. Storage

Generally, you should store static assets, such as your logo, in a separate location from your app. Certainly, you should store any user-submitted images in a separate location.

Amazon S3 + Carrierwave

Recommended. Amazon S3 provides a place to store static assets, such as images and attachments. In the simplest use case, you would manually upload images like your logo, and reference those from your views.

In a more advanced use case, you could allow users to attach images to items in the app, and dynamically upload those images to S3. For that, check out Carrierwave, which makes file uploads to S3 amazingly easy.  Also check out the Paperclip gem.

6. Database

PostgreSQL

Recommended. PostgreSQL is a relational database that enjoys wide adoption among hosting providers like Heroku and EngineYard, and recently introduced highly optimized JSON fields that support more free-form data. It’s a well-maintained, reliable, fast database that should do the trick for most production apps.  Check out how to get started.  If you’re on a Mac dev environment, use Postgres.app to set up a local Postgres server on dev.

MongoDB

MongoDB is a non-relational database suited to more fluid information like documents and “mashups” of data from multiple sources. Some use MongoDB to bring in data from relational database and present it in a different way, since it is so flexible.

Beware, though, that without the rules of a relational database, a MongoDB database is harder to govern, and bulk changes a bear. Consider Mongo if you feel the data you are storing would not be appropriate for a relational database, but be sure to check out Postgres’ new JSON features first.

7. Performance monitoring

New Relic

Recommended. New Relic tells you which methods in your app are running slowly. In many cases, it’s free to use, and you can always upgrade for more granular information. It will alert you to sudden slowness in your app, which is important as you scale. There’s no reason not to get started with a free account for a production app.

App Signal

App Signal, based on Europe, integrates error reporting and performance monitoring in a very clean interface. It’s worth checking out.

8. Code quality

Static analysis checks out your code to find antipatterns, or poor practices could make your app less efficient or more difficult to maintain.

Code Climate

Code Climate quickly finds the poorly-formed or inefficient Ruby and JavaScript code in your app, so you know what to refactor first. Then, it monitors your GitHub repo so you don’t regress.

RuboCop

Prefer to do it yourself rather than use a hosted service? Code Climate likely uses RuboCop for much of its analysis, and you can run it locally for free.

Ruby Science

This isn’t a service, rather a book, but it’s excellent reading that can help you address some of the issues brought up by Code Climate or RuboCop.

9. Authentication

Authentication these days still includes user names and passwords, but is quickly expanding to social sign-in through networks like Google, Facebook, Twitter, and GitHub.

Devise (+ optional Omniauth)

Recommended. The long-time gold standard for authentication in Rails app, Devise pulls its weight as a solution that is quick to implement but also very extendable. It supports user name and password authentication out of the box, and has built-in support for Omniauth to support social sign-in without much pain.

Clearance

Clearance is for people who either, 1.) want very simple user name and password authentication and don’t envision going beyond that, or 2.) want to further control and customize the authentication in their app. Most importantly, it is easier to understand what Clearance is doing because it’s code is lighter. Without turnkey integration with Omniauth, Clearance makes it harder to integration social sign-in.

10. Hosting

EngineYard

Recommended. EngineYard’s support is exceptional, with e-mail and phone available no matter what plan you’re on. You know exactly what you’re getting, because your app and database are hosted on fully-fledged virtual machines with clear specs. You can deploy, manage backups, and spin up/down servers through a simple web interface, never touching the command line.

Heroku

Heroku is conceptually interesting and powers a lot of Rails app. It uses an original concept called “dynos” to allocate your app’s resources and allow you to scale. This abstraction could be helpful, but many might prefer to work with the actual VM’s that EngineYard offers. You’ll most certainly be dealing with the command line, but Heroku’s tools are good.

I’m hesitant about Heroku’s support. You can’t pick up your phone and call them, like you can with EngineYard. Heroku’s default support plan has a “1+ day” response time,  while EngineYard offers a 30 minute response time around the clock for urgent issues. Both services offer enhanced support plans, but EngineYard’s built-in support appears to be better.

11. Backup

If you use a platform-as-a-service provider like Heroku or EngineYard, you’ll generally get backup in the package. Just be sure to use it!

There’s more I haven’t covered here, like continuous integration and deployment. It goes to show that 1500 words don’t do justice to the vast ecosystem available to developers.

Mixed numbers in Ruby / Rails

At Cook Smarts, we’re going to let people scale recipes.

When doubling a recipe, for instance, 1 1/4 cups would become 2 1/2 cups.

These are both mixed numbers, a combination of a whole number and a fraction. We show them to users instead of their fraction equivalents, 5/4 and 5/2.

Rails provides no built-in methods for doing calculations with mixed numbers, so we have to convert them to and from rationals before treating them as numbers.

A rational in Ruby is a number that can be expressed as a fraction. In most cases, all of the quantities in an app can be expressed as rationals.

That way, we can perform calculations and still show users pretty fractions (i.e. 2 1/2 instead of 5/2).

Convert a mixed number to a rational
for calculations

Unlike mixed numbers, rationals can be used in calculations. Use this function to convert a mixed number string into a rational.

Above, we split a mixed number into its integer and fraction components and add them together to form a rational (or whole number). The function can also handle decimals, integers, and regular fractions.

Note: This is not ready for negative mixed numbers.

Convert a rational to a mixed number
for the user

Use this method to convert a rational, like 3/2, into a mixed number that we can show to the user, like 1 1/2.

Above, we convert to a mixed number if the provided number is not an integer and it’s more than 1. Otherwise, we return the number as a string.

A note on precision

Rationals and integers are exact, while decimals and floats are sometimes not. 1/3 is precise, but 1.333333…. is not.

Never mix decimals and fractions if you want to maintain precision.

Building a WordPress theme with SASS and _s – setting up

Call me crazy, but I’m about to make a WordPress theme from nearly-scratch, using Automattic’s _s starter theme.

_s is a bare-bones theme that comes with minimal styling, no grid system, and pretty much no opinions on aesthetics at all. Out of the box, it looks like the web in 1995.

Homepage on the _s theme

Not so far off from looking at a web page in NCSA Mosaic, one of the first browsers.

mosaic2

Bootstrapping WordPress

Getting a local installation of WordPress is easy and free. Here are the instructions for a Mac:

  1. Download MAMP
  2. Download WordPress, and place it in a directory on your hard drive
  3. Point MAMP to your WordPress directory
  4. Set up a database in MAMP, by clicking the Webstart button in MAMP, clicking PHPMyAdmin in the navigation, and creating a new blank database
  5. Go to your root site in MAMP
  6. Set up WordPress through the easy wizard, using your new database name and root as the user

There are better tutorials on bootstrapping WordPress, but it is of course an essential first step.

Once you have WordPress up and running, drop your unzipped _s theme to wp-content/themes as its own folder. Mine is wp-content/themes/corey.

Next, select your theme in the WordPress admin interface’s theme chooser. Now, f you go to your local WordPress site, you should see something similar to the screenshot above.

Time for SASS

Clearly, there is a lot of CSS styling to do here. Automattic began offering a SASS version _s, which we will use.

Never heard of SASS? It’s a CSS pre-processor (in other words, you write SASS and compiles into CSS) that lets you write styles in a more concise and organized way.

To get the SASS version of _s, select Advanced Options on the _s site, and choose “_sassify!”

Download the SASS version of _s

SCSS compiles to CSS. That is, you edit SCSS files, and they become CSS files. How does this compilation happen in WordPress?

For that, we turn to a glorious plug-in called WP-SCSS. Install it on your local site.

Specify these settings, specific to _s, in your WP-SCSS settings:

SCSS Location: /sass/
CSS Location: /

Multiple commenters have noted the correct SCSS location is /sass/, not /scss. Corrected above. Thanks!

This tells WP-SCSS to take _s’s SCSS files and convert them to CSS files in the theme’s root directory. For _s, this means take a bunch of SCSS files and converting them to style.css in the theme’s root.

Open your theme folder in your favorite text editor. I’m using Sublime Text.

Go to your _headings.scss file under /sass/typography within the theme.

Style tree in the _s theme

I added color: red to the file, so it would show up like this:

Check out your WordPress site now. The headings are red! In the background WP-SCSS compiled _s’s SCSS files to style.css, which is shown in your browser. Seamless!

Headings shown as red on WordPress site homepage

We’re at the tip of the iceberg. Next we’ll jump more into styling our site, then comes structure, and… a lot more.

Follow me on Twitter, subscribe by RSS, or subscribe to our mailing list below to get updates on this series.

Creating a Ruby gem for one-time announcements, part 4 – performance, views

I’m developing a gem to deliver one-time announcements to users in Rails apps. See the previous parts of this series for some background.

Now, in part 4, we’ll test performance performance and add a view to show the current announcement.

Measuring performance

How much work does the gem have to do in order to retrieve the latest announcement for the current user?

Database calls are often a performance culprit. Queries should be small in number (see N + 1 problem) and minimally taxing on the database.

The gem runs only one query to retrieve the latest announcement.

To see how long that query lasts, we’ll run the method that calls it in the Rails console. The current method of the Announcement model checks for an announcement for the current user.

What if we have 1,000 announcements and 50,000 users? There are a few ways to test performance of a specific method, one of which is a benchmarking gem from Viget Labs. I used Ruby’s built-in benchmark module.

The call to Announcement still comes in at under 1 ms with 10,000 users and 5,000 announcements.

Showing announcements

A view helper called current_announcement will call the current announcement from the model.

Then, the developer using the gem can pull in the current announcement through a view partial.

We still need to let the user close the announcement, and remember the announcements that each user has read.

Integrating with Foundation and Bootstrap

At Cook Smarts, we use Zurb Foundation, and it’s served us well.

The gem will include templates for announcements using Foundation’s and Bootstrap’s existing styles.

It will also include a template for sites that do not use either framework. In that case, it is up to the developer to style the announcements in the app’s CSS.

What’s next

Next, we’ll talk about remembering which announcements have been read by the current user, security, and how site administrators can add announcements.