by

Four things Tridion guys should know about Front-end in 2016

Reading Time: 5 minutes

The world of front-end development is changing at a lightning fast pace. It’s hard enough for a front-end developer to keep up. So, how should a Tridion architect or general back-end developer stay “in the know” about the world of front-end development? Let me share with you what I’ve been doing in 2016 that I think you should keep an eye on. This is stuff that I have personally used in real Tridion implementations this year that I think will benefit us in the upcoming year.

ES6 / Harmony / ECMAScript2015/ JavaScript++

Ok, that last name isn’t really a thing. But ES6, Harmony, and ECMAScript2015 are all the same name for the sixth edition of JavaScript. We rolled into the Seventh edition in June of 2016, and there is an 8th edition in the works.

What do you get from it

So much, but lemme give you some bullet points:

  • Traditional OOP syntax and keywords. Yep, class, constructor, super,  extends are now reserved keywords in JavaScript. I know you backend guys are excited about this, but, spoiler alert, it’s just syntactic sugar for the prototype. But fine, whatever makes you happy
  • Modules. You can now import JavaScript files, or just parts of files, into each other.
  • Arrow functions. ()=>{} creates an anonymous function that inherits the scope of its containing function. You can write much less of var _this = this now
  • Promise. Oh man, this is a biggy. The Promise is the answer to callback hell that you find yourself in as a result of asynchronous sins. A Promise represents a value that will eventually be resolved. With promises come beautiful methods like .then() for doing something when it gets resolved, and .catch() when there’s a problem
  • Default parameters. var foo = function (bar = baz) {} is a thing you can do now. No ternary operators any more for potentially undefined variables.
  • Template literals.  var foo =`Why can't ${.1 + .2} be .3` It’s a string that allows embedded expressions. A string that works across multiple lines.

What can you do with it?

  • The need for Typescript isn’t eliminated; but it is diminished if all you want is a traditional OOP model in JavaScript.
  • The module feature is useful connecting various parts of your front-end without loading one giant bloated file
  • You can write fewer lines of code with the arrow functions and the default parameters
  • Promises will help you substantially with your AJAX based apps (DD4T4JS, anyone?)
  • Template literals can help you write quick and dirty templating, without a framework.

When can you do it?

Now. Seriously. Modern browser support is very good for ES6. Shockingly, Safari will be in the lead by offering 100% ES6 support soon.

All of the basic stuff I’ve mentioned is there already in all the major browsers. However, to stay safe, most front end developers are using Babel  to transpile the JavaScript for us. Also, all of these features are already sitting there in node.js (if you’re on version 6). There’s a lot of cool stuff now in JavaScript

React

React is the new Angular. No, it’s not a replacement for it, but it’s the new “it thing”. All the cool kids are using it. In fact, Tahzoo used React recently to implement faceted search for a client.

What do you get from it?

  • Managed state. Much of the time, the JavaScript you write for a website is really about managing the “state” of something: clicked or unclicked, content loaded or waiting, filtering information. React is all about managing state.
  • JSX. JSX is the templating language that React encourages, but doesn’t force you to use. It’s XML-based, allows you to write plain HTML, and doesn’t introduce any new terms. It’s nice.
  • Improved DOM performance. Because React is all about state, it only re-renders elements when the state changes. That makes it much nicer on page performance that jQuery could ever be.
  • Functional and Class components. React likes using JavaScript’s ES6 features, like classes. So class Navigation extends React.Component{} is totally a thing you might write

What can you do with it?

  • Faceted search; Tahzoo already did that for a pretty big client
  • Single Page Applications
  •  Ever had a client say, “man, I wish our site were a mobile app”? Now you can do that with React-Native. You can compile React code into a native app
  • Make a new GUI for Tridion. Seriously, this is squarely in React’s wheelhouse.

A caveat:  React is sufficiently complex that it’s very unlikely that design agencies will use it for “quick prototyping” like I’ve seen with Angular.  React is not a “quick and dirty” solution, and it can be difficult to inject React parts onto a static page.

When can you do it?

Now. Everyone else is.

Just keepin mind that the startup for React is a bit… cumbersome. You’ll want to be familiar with node.js, gulp, and maybe even Browser Pack. If you want to use JSX, you’re going to need Babel, too. Expect about a day to get ramped up in React.

 

Flexbox

CSS is more than just float:left now.  The W3C has introduced multiple new layout modules, and one of the most mature of them is the Flexbox module. Oh how I love it:

What do you get from it?

  • Vertical.freaking.centering. It’s about damned time, but you can now vertically center stuff in CSS
  • Orientation. You can control which direction elements flow in with flex-direction:row or flex-direction: column . You even have row-reverse and  column-reverse if you’re feeling sporty
  • Distribution. You can control how elements are distributed across a main axis and a cross axis.
  • Controlled growth. You can tell all elements in a container to grow or shrink to take up additional space. It eliminates weird math headaches when you have 3 divs that need to take up 33% of space, but still have margins.
  • Controled order. If an element is display:flex , then you can tell any children order:1 or order:-1 and change the order in which elements are presented.

What can you do with it?

  • Improved responsiveness. Writing components with Flexbox reduces the need for media queries, in my experience
  • Content responsiveness. Because flexbox is a “flexible box model”, items take up space based on the presence of other items. So you remove rigidity in content authoring
  • Responsive Controled order. Remember how I said that you can change the order in which things appear? Combined with a media query, you can shift the order of content in a container — entirely with CSS!
  • User controled order. Back to above; we can now change the order of things with CSS. That means you can make a simple class like .first {order: -1} that a schema and a template could toggle

When can you use it

Now, with some caution. Flexbox is supported in all modern browsers including IE10. Tahzoo has been delivering flexbox layouts for Tridion clients for three years now.

I would caution you that there is zero support in IE9. Support for the native browser on Android devices is between iffy and blog-worthy.

 

Filters

Ever had a client say, “I wish we could change the color of that video/image without using Photoshop?” Well, now we can. We can apply Photoshop-style color filters (And other kinds of effects), in the browser. We can do this with CSS and SVG. In fact, there’s a pretty spiffy colorblind testing chrome extension that does this for your whole web page.

What do you get from it

  • Blur, brightness, contrast, saturation, and shadows from CSS
  • Color filtering, boldening, and textures  in SVG

What can you do with it?

  1. Make a CSS file with all your flashy effects in different class names
  2. Make an embeddable schema in Tridion that you put on image and video components
  3. Write a template that applies those classnames to the media element
  4. Profit

When can you use it?

SVG support started in IE9. SVG filters  landed in IE11. So it’s locked into modern browsers only.

CSS filtering still doesn’t have any support in IE at all, but it’s there in Edge. When you look at caniuse.com, the “partial support” for Edge is for filter: url('filter.svg') , Some browsers haven’t yet implemented the ability to use SVG in your CSS. I know, I know. I’m disappointed, too.

 

In summary

JavaScript is improving, React is cool, CSS is badass, and don’t forget about SVG. And all of this stuff has a real tangible benefit to people who are using a content management system.

Get coding.