Search

Pony Foo

Ramblings of a degenerate coder

ES6 Template Strings in Depth

reading time: , published

Yesterday we’ve covered ES6 destructuring in depth, as well as some of its most common use cases. Today we’ll be moving to template strings. What they are, and how we can use them and what good they’re for.

Template strings are a new feature in ES6 to make working with strings and string templates easier. You wrap your text in `backticks` and you’ll get the features described below.

  • You can interpolate variables in them
  • You can actually interpolate using any kind of expression, not just variables
  • They can be multi-line. Finally!
  • You can construct raw templates that don’t interpret backslashes

In addition, you can also define a method that will decide what to make of the template, instead of using the default templating behavior. There are some interesting use cases for this one.

Let’s dig into template strings and see what we can come up with.

Read the full article

ES6 JavaScript Destructuring in Depth

reading time: , published

I’ve briefly mentioned a few ES6 features (and how to get started with Babel) in the React article series I’ve been writing about, and now I want to focus on the language features themselves. I’ve read a ton about ES6 and ES7 and it’s about time we started discussing ES6 and ES7 features here in Pony Foo.

This article warns about going overboard with ES6 language features. Then we’ll start off the series by discussing about Destructuring in ES6, and when it’s most useful, as well as some of its gotchas and caveats.

A word of caution

When uncertain, chances are you probably should default to ES5 and older syntax instead of adopting ES6 just because you can. By this I don’t mean that using ES6 syntax is a bad idea – quite the opposite, see I’m writing an article about ES6! My concern lies with the fact that when we adopt ES6 features we must do it because they’ll absolutely improve our code quality, and not just because of the “cool factor” – whatever that may be.

The approach I’ve been taking thus far is to write things in plain ES5, and then adding ES6 sugar on top where it’d genuinely improve my code. I presume over time I’ll be able to more quickly identify scenarios where a ES6 feature may be worth using over ES5, but when getting started it might be a good idea not to go overboard too soon. Instead, carefully analyze what would fit your code best first, and be mindful of adopting ES6.

This way, you’ll learn to use the new features in your favor, rather than just learning the syntax.

Onto the cool stuff now!

Read the full article

A Brief History of ES6 Tooling

reading time: , published

I wrote a few articles about React and ES6 these last few days, and today I wanted to add a bit more of context as to why I seem to be super into ES6 all of sudden. I’ve had an interest in ES6 for a long time, but we weren’t always prepared to write code in ES6. In this post I wanted to briefly touch on the history of ES6 tooling and why I believe that today we’re in a much better place to adopt ES6 than where we were half a year ago.

For the most part, we have Browserify, Babel, and the spec being finalized to thank for. But we didn’t always have these tools and they weren’t born as mature as they are today.

Babel JavaScript Compiler

Read the full article

React, JSX and ES6: The Weird Parts

reading time: , published

I’ve spent a few days working with JSX and React and I have mixed feelings about them. React is pretty neat, but I find that they made some very unusual choices when it comes to their API design. Then there’s JSX, definitely the weirdest aspect of React – we’ll look into it as well. I’ve really enjoyed the ES6 and Babel experience, although I’ve noticed that there’s a learning curve where you start to decide whether using an ES6 feature is better than its ES5 equivalent or not, something we’ll explore towards the end of the article.

1961 Buick "Flamingo" with rotating front seat

Read the full article

Server-side React Layout & Side Effects

reading time: , published

We’ve been hard at work last week analyzing how to build a universal app using React. First we looked at the bare minimum needed to run Babel through Browserify for ES6 and JSX support, as well as how to render a basic app seamlessly in the server and the browser. On friday we added react-router so that view routing is handled for us on both the server-side as well as the client-side – universally. Today we’ll be making some tweaks to what we have so far.

Particularly, we’ll be moving the server-side layout rendering out of express-hbs and into another React component, the <Layout /> component, which will only be rendered on the server. The reason for that change is one of consistency – instead of having to understand (and deal with) two different templating languages in Handlebars and JSX, we’ll only be dealing with JSX.

After making that change we’ll be looking at a couple of react-side-effect-powered libraries. One of these will enable us to set the document.title declaratively in our views from anywhere in our JSX templates. The other allows us to define <meta> tags anywhere in the document as well.

Let’s get on with it!

Read the full article

Universal Routing in React with ES6

reading time: , published

Yesterday, we learned about how to set up a build process for an universal ES6 React app using Babel, and how to have that React app render “universally” – on both the server-side and the client-side. Today we’ll add routing capabilities to the application so that it isn’t literally a “single-page app” anymore.

One thing there’s to like about React for sure is that it’s only the V in V* (View, Whatever). When it comes to routing in your React app, you could implement it yourself by hand or you could use react-router. Implementing it yourself might sound tempting at first, but react-router makes it easy to expand the already-universal app we have with routing capabilities without having to do much different things in either the server or the browser.

Read the full article
Pony
Foo
Pony
Foo
Pony
Foo