Technology

Kristina Vragovic

React and its Less-Cool Cousin, Semantic HTML

Jul. 6, 2018

One of the best and most meaningful features of HTML5 is its introduction of more “semantic” tags, or tags that help define the structure of a webpage. Tags like section, article, footer, nav, and aside are highly useful for improving the accessibility of a website for visually impaired users. They provide valuable information about your site to any screen readers that are processing it, allowing for easier browsing and less time wasted with repeated or irrelevant information. Semantic tags improve your site's SEO rankings for the same reason — they help search engines understand what your site is about. And on a more basic level, these tags make it easier for developers to understand what role each element plays on a particular page, increasing maintainability.

So where does semantic HTML fit into the React.js framework?

React requires that any render function returns a single parent element that contains the rest of the content. Depending on the complexity of your UI, this rule can result in an bulky Matryoshka doll of divs, divs, and more divs. The benefits of semantic HTML can get muddied by just how easy it is to stick another handy, neutral div in your component tree, especially when (out of habit) you start using divs in place of more semantically useful tags, like button or nav.

Enter React v16.2.0, released in November 2017, which introduced an awesome new feature called Fragments:

"Fragments look like empty JSX tags. They let you group a list of children without adding extra nodes to the DOM."

With this addition to the React framework, there’s no reason to bulk up the DOM with more div tags. There’s a handier, even more neutral tag in town that does exactly what we need.

render() {  
    return (
        <>
            <h1>Content title</h1>
            <p>Sample content</p>
        </>
    )
}

Fragments are a way not only to streamline your webpage, but also to get out of the habit of using a div when another, more specific tag would make sense. Let’s make the internet a more accessible place by remembering that for some consumers, semantic HTML isn’t just “nice to have.” It’s essential for navigating your UI.

And hey — no more sifting through divs to debug your front end, am I right?

Kristina Vragovic

What People Are Reading

Technology

1/6/17

React Lessons for Newcomers

At 20spokes, developers spend a roughly equal amount of time between Ruby on Rails and React. While we enjoy working in both frameworks, they are quite different in approach, and going from a Rails way of thinking to a React way of thinking can be an adjustment.

One major way in which these frameworks are different is that Rails takes care of a lot of architectural issues that React leaves open for interpretation. Coming from a Rails background, I found the openness of React to be a bit anxiety-inducing at first, but I've come to really embrace it, because it's forced me to think more carefully than ever about how other developers would approach my code.

As a team, we've also considered what our best practices should be towards React, as we all want to make our code understandable and friendly to anyone who encounters it. To that end, below is a (growing) list of our approaches to making our React projects not only maintainable, but enjoyable to work with.

Be relentless with components

The basic building block of React is the component. To those new to React, they can best be thought of as modules.

As a developer, I start to get nervous when I see large components that perform various functions. The solution to keeping your files short and sweet is to take every opportunity to break your objects into re-useable components. Having larger components may not seem like a big deal when starting a project from scratch, but if you relentlessly component-ize you'll thank yourself as your project grows.

There are some code smells to recognize when you should create new components. If you see lots of groups of markup within a single div, those groups should probably be their own component.

If we have lots of renderXXX functions within in one component that render more markup, that's usually a code-smell that whatever is being returned from those functions should be their own component.

Make components as reusable as possible by passing dynamic data as props.

Privilege functional components over class-based ones

In many cases, it's overkill to Use React's Component class for every component you create. Not all components need access to the Lifecycle Methods or local state that Component provides. Start with stateless functional components and turn them into React Component instances as needed.

Take advantage of PropTypes

We started the practice of listing out PropTypes at the bottom of every component, so other developers can quickly reference what props are needed or optional. Oftentimes, we'd investigate what data we should expect in a component by looking up examples of that component elsewhere in the codebase. This easily can be avoided by using PropTypes, which provide a quick way to see what data is being passed, and of what type that data should be. Here's an example from our reusable Button component:

Button.propTypes = {  
  text: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired,
  disabled: PropTypes.bool,
  icon: PropTypes.string,
}

We're pointing this out because, while Facebook already notes it as a best practice in their documentation, it's something that's easy to skip over or forget to do. But for something that's not hard to do at all, it provides a lot of value when developing and maintaining your app.

Use Lifecycle Methods with care

Despite being incredibly powerful, lifecycle methods (like ComponentDidUpdate) can cause a lot of headaches to those new to React. Be careful when updating state or props within these methods, as it may cause infinite looping.

For this reason, I prefer to place lifecycle methods at the very top of a component declaration, so I can see all of that logic together when debugging.

Check out part 2 of this series, Redux Lessons for Newcomers.

Technology

11/20/17

Cross-Platform mobile development is cost-effective and faster to launch

Two years ago, if a person approached us for mobile app development, the first question would be what platform to launch on first - iOS or Android. It was almost double the cost to deploy on both and double the maintenance.

Fast forward to today, we can deploy on iOS and Android quicker before, at the same time, and with the expected native quality.

So what has changed? Technology has gotten a lot better. We particularly use React Native, an open source framework from Facebook, that allows developers to develop in a common language, Javascript, and deploy on both iOS and Android.

And it is native! Previous technologies for cross platform mobile apps would create a wrapper of a web view. Think of the older experience as using the browser on your phone for a site with a few more bells and whistles. It was close but the difference is noticeable when switching to native applications, from scrolling to the overall experience.

How does this impact everything now?

Cost is no longer double for both platforms. It can even cost less due to wide spread community support developing open source libraries.

Maintenance is a lot easier. A majority of the issues can be fixed in one code base and of the same language.

Recruitment and team knowledge is easier. Your team only need to know one language and most developers know Javascript. iOS is written in Objective C or Swift and Android is written in Java.

Reusable code for desktop web views. With React Native, we are able to share over 50% of the code with the web view, saving all of the above even more.

Stay tuned, as I’ll be going more into the technologies and other benefits.