Notch8 Ruby on Rails Web Application Developers

Full-throttle Ruby on Rails Development

  • About
    • Team
    • Active Clients
  • Work
    • Capabilities
    • Framework Updates
    • HykuUP
    • Code Audits and Reviews
    • Ongoing Application Maintenance and Support
  • Clients
    • Case Study: ShopTab
    • Case Study: UCSD
    • Case Study: WUSTL
    • Case Study: UCLA
    • Case Study: CablingPlus
  • Events
  • Blog
  • Contact
You are here: Home / Archives for JavaScript

JavaScript

Blending React into a Rails Project

November 7, 2016 by Steven Leave a Comment


With the release of Rails 5.1 and the integration of webpack and yaml into rails all that is described here can be done much more simply using what is integrated into rail. That said, if you can’t upgrade yet or require serverside render the solutions below are still great options for you.


While the dawn of the large JS frontend app is long past and there is a new magical unicorn and pixi dust JS framework every time you turn around, there are still a lot of stock standard web apps out there. As a web consultancy, these apps have been our bread and butter for quite some time and there is no real need to change them. They just work.

But as things change, it would be nice to add some of the dynamic features of the new javascript hottness to our standard rails apps. Here are a few ways to integrate React into rails.

Notice: there is going to be a stupid amount of alliteration in this post. Fair warning. React rendering in Rails rendered radical web app.

React-Rails gem

I am starting here because this is the easiest way to get started with React on Rails. Per usual, just include the gem in your gem file gem react-rails, bundle install, and then run the install generator rails g react:install.

The reason I say this is it is fully integrated with sprockets and the current rails asset pipeline. if you already understand the asset pipeline and helper methods, then you’re good to go. Also, there is no dependacy on npm.

This is all you need to mount a React component to a spot on the page. That is this helper react_component.

<%= react_component("MyCoolWidget", prop1: "123", prop2: "abcd") %>

Other features include the ablitiy to render the components on the server for faster rendering and SEO, rendering a component as a view, and writing your components in ES2015 syntax or CoffeeScript.

One problem to note is that this doesn’t support a module system for JavaScript like Common-JS or ES6 imports. So, working with packages for React that do not have a version that does not export a useable variable is difficult.

[Read more…]

Filed Under: Coding Corner Tagged With: JavaScript, Rails, React

React Testing

October 3, 2016 by Steven Leave a Comment

React Testing

Lets face it, testing is important but testing javascript UIs is not often straightforward.

Now for React. React is a excellent choice for your front-end view logic. I love React for how productive it makes me feel. However, one downside of the React ecosystem is that there are so many choices to make in terms of what tools you will use. Varying choices include Webpack, Browserify, ES6 and Babel to manage your state, business logic and request data. It requires a lot of sifting through. To make it easy, here is a set of good choices for testing React that have worked well for us.

Tools

  • Mocha & Chia

Mocha is a test runner that has been around for a good while. It provides describe() and it() functions for BDD style testing. It is reminiscent of Rspec in the Ruby world. Chia is often used with Mocha as it brings a whole host of assertions for whichever style of testing you like.

  • Chia

With Chia you have the options of using expect, should, and assert style assertions making it flexible for anyone’s taste.

  • Enzyme

Enzyme is a React component testing library from airbnb. It provides multiple, optimized ways to render React components and make assertions against them. Enzyme uses JSdom for some of its functionality and will be included as a dependency.

[Read more…]

Filed Under: Coding Corner Tagged With: JavaScript, React, Testing

Collapsing components in Ember

November 6, 2015 by Vincent Colavin Leave a Comment

In this article I work through my learning process while building collapsing components in Ember.

This article is not an introduction to Ember. I assume you already know how to create components, display them with Handlebars, and link together their actions and data. Please feel free to contact me if you have questions about these things, or read the official intro to Ember components.

The task:

“Hey Vincent, we need it so that if you click a heading, all of that headings’ filter terms collapse. Like an accordion.” – Matt

[Read more…]

Filed Under: Coding Corner Tagged With: Ember, JavaScript

Capabilities & Services

Notch8 has an experienced team of web developers distributed on the west coast of the U.S. available for:

  • Design, Planning, and Architecting
  • Cross Platform Mobile
  • Scoping and Technical Consulting
  • Code Audits and Reviews
  • iOS and Android Development
  • Ruby on Rails and Javascript Development
  • Full Stack Development
  • Samvera / Hyku Data Preservation Solutions
  • Framework Upgrades
  • Monitoring and Support
  • Optimization and Performance Tuning
  • Team
  • Contact Us
  • © Notch8 2017, some rights reserved

Copyright © 2019 · Parallax Pro Theme on Genesis Framework · WordPress · Log in