28
Aug
2015

Give it 5 days – Facebook Relay and GraphQL

by Albert Still

Me and Alex Savin have been rebuilding Red Badger’s blog with Relay and GraphQL. Relay is a front end Javascript framework that works with React to consume a backend GraphQL server. Relay deals with querying a GraphQL server and passing the data to your React components as props. And making mutations on the server while giving you optimistic update and error handling capabilities. But it will soon also be handing in-memory/client state and isomorphic universal app features. Then it will become a competitor with Flux, Redux and Red Badgers Arch. Furthermore a React / React Native / Relay / GraphQL set up could become all you need to deliver the ultimate single page web, iOS and Android app.

A blog by Basecamp co-founder Jason Fried called “Give it 5 minutes” was referenced in the React docs when it came out because React challenges conventional wisdom such as having HTML in your JS. Unfortunely with GraphQL and Relay it’s more like give it 5 days. There is a lot to learn and some of the example code is long in comparison to the short neat examples we saw with React. But power through and you will see the light of Relay and GraphQL. However do bare in mind the libraries are young and there will be some time consuming and confusing error messages along the way.

The libraries

Before Relay came out we only had one library to play with which was graphql/graphql-js. I wrote a blog on this library where I made a GraphQL sever for querying data on any movie in The Open Movie Database. Now since Relay came out on August the 11th we have 3 more libraries to play with!

  1. graphql/graphql-relay-js – A small library to help us construct a graphql-js schema supporting Relay. There are 3 core assumptions Relay make about your GraphQL schema. You can think of these as additional specs to the pure GraphQL specification.
  2. graphql/express-graphql – Express middleware that makes it easier to create an endpoint that will receive a GraphQL queries. It accepts queries via a HTTP POST or GET and returns a JSON response.
  3. facebook/relay - the Relay library itself which runs in the clients browser with React

And fortunately relayjs/relay-starter-kit which ties React and all four of the above libraries together to help us get going quickly. Also if you want to play with example Relay apps check out the 3 official Facebook ones in the example folder in the Relay repo. And the very recently released utility library graphql/graphiql is absolutely sick, it’s a React component that lets us render an in-browser GraphQL IDE to test out our GraphQL server.

The magic

Native app speeds with caching – no need to refetch the same node attributes again over the network!

When you visit our /blog index page our SPA application using Relay & React Router (great blog post about doing this here), Relay makes a GraphQL network request asking for 15 posts and a small subset of the post fields(aka attributes) we need to render the multiple PostPreview components. These fields are specified in the PostPreview’s Relay container. For example it asks for the title and the published at date but not the posts body. Now what’s cool is when you click on the post and view the actual post page, Relay makes another request this time asking for more Post attributes such as the body. But this time it does not ask for the attributes Relay already has in it’s store, even though the Post Relay container specifies them. This is because a Post in our GraphQL schema implements the node interface and has a globally unique id which Relay asks for and uses as a key in it’s cache. Overall this is nice feature we get for free that makes our app more performant and gives us native navigation speeds! 

Continuous scrolling made easy

One of Relays features is it declarative like React. Watch here how I declare the post’s index page displays 15 posts initially, then fetch 5 more when the user gets to the bottom of the page. Furthermore I use React’s setState(function|object nextState[, function callback]) and Relay’s setVariables([partialVariables: Object, [onReadyStateChange: Function]]) callbacks to display a loading message to the user! Very easy to do!

It lets your front end developers move faster

A GraphQL/Relay set up separates your back and front end team and allows your front end developers to move fast and provide awesome UX. When a view needs an extra attribute you simply add it to your components fragment and your done. No need to make changes to traditional ad-hoc backend server endpoints.  

We are hope to open source our Relay blog soon so people can reuse it! Cheers.

10
Aug
2015

London React Meetup – August 2015

by Paul Roper

London React Meetup - August 2015

August brought us together for another meetup in Facebook’s fancy Euston offices last Tuesday, and that meant another opportunity for the React community to get together for a few beers, a bit of pizza and some exciting tech chat. The evening followed a slightly different format this month with two longer talks presented by Yacine and Viktor covering two cutting-edge topics:

Yacine Rezgui: Live Coding Session with Native Modules

Yacine’s coding session displayed the ease with which React Native can be used to develop an iOS application and also how seamless it is to employ ObjectiveC modules within the JavaScript. He even went down the risky route of coding it live and got a sound recording demo out of it! 

React Native is an exciting prospect for anyone with React experience put off by having to learn a whole new platform to develop for when looking to build a mobile application. It offers all of the performance of a native app along with all of the familiarity of React during development, and the iOS module bridge makes importing native ObjectiveC code easy.  If this post by Facebook from March is anything to go by, an Android implementation is on its way very soon too.

At this rate we could be seeing cross-platform, reusable React components being used to develop both iOS and Android applications in parallel with desktop user interfaces. The speed with which Yacine put together a mobile application showed off one of the biggest draws to the framework and hopefully this will encourage a few React developers looking for something new to play around with to give it a shot.

Viktor Charypar: GraphQL at the Financial Times

React isn’t the only technology developed by Facebook that we’re enthusiastic about at Red Badger. Viktor’s talk this month was about bringing GraphQL into production at the Financial Times using the graphql-js reference implementation plus the benefits and costs that were brought with it.

GraphQL has been receiving a lot of attention from us recently. It aims to centralise how data is retrieved from services such as REST APIs or databases in a way that is totally agnostic to your backend setup. You simply pass a query to your GraphQL server and it will go off and find the data that you’ve requested. Once it’s found it, it’ll be returned in the format specified by your schema. This happens to fix a few problems associated with RESTful architectures along the way like the need to make multiple requests to retrieve complex data types. You only need to make a single query describing the data you require and the server will handle the rest.

While it’s still early days for the project (the public introduction to it was only posted back in May, it’s been used internally at Facebook for a few years though), Viktor already being able to show it off in production is a testament to how useful a tool it is. A working draft spec documents the language if you’d like to start working on an implementation yourself.

Judging by the positive tweets popping up afterwards, Viktor’s demonstration of the project looks like it has introduced a whole new crowd of people to GraphQL. If you want to take a look at how it’s used within the Financial Times, their code is open source.

Follow Us

Once again, a huge thank you to Facebook for letting us borrow their offices for the evening and also to everyone that attended. For all the latest meetup-related news, don’t forget to follow us over at @londonreact on Twitter. When it’s time for us to get together again, head on over to the London React Meetup page to get your tickets and we hope to see you next month!

7
Aug
2015

Badger or badgerette? Does it matter what’s down your trousers?

by Amy Crimmens

I’ve worked in various non-techy roles in tech companies for the past 7 years. When I started at Red Badger a year ago, one of designers spent time looking at the gender split of the company and proudly announced it was 50/50- I was quite surprised at the “fuss”. Now I don’t know how I lived in such a bubble!

My last role was at an IT Consultancy with a female founder, the company celebrated its 20th anniversary just before I left and had around 80 employees. It was a great company to work at and I never gave a thought to the gender split. The founder Sally doesn’t agree with gender-specific events and groups and made the very valid point that if you prohibit half the population from joining in you miss out of half of the potential knowledge and experience. I can totally get on board with this.

However, after a year of working in the startup world and particularly after the palaver that resulted in #ILookLikeAnEngineer- it’s clear there is a lot to be done, and it’s not just us girls that care, the guys are bothered too. When we asked the team why they enjoyed working at Red Badger several of the guys responded along the lines of “it’s not a sausage-fest”.

 #ilooklikeanengineer

#ILookLikeAnEngineer Red Badger style.

 

As a relatively new, and growing company we have a responsibility; companies that start with a commitment to diversity are likely to maintain it, whereas companies that grow without these principles are less likely to change their ways once they are established. If we want things to be more equal and diverse in the future, the start up world can play a key role.

I don’t agree with gender quotas or putting someone is a position for any other reason than they are the best candidate for the job but there are things we can do to encourage a more equal gender balance. At Red Badger, if we notice one area of the business is turning into the very eloquently put “sausage-fest” ( thanks Viktor) or the opposite, we look at why and try to rectify the trend. We recently used an online tool to check for any gender bias in our Software Engineer job ad for example.

The sausage-fest comment aside, there are big reasons why its great that we have a diverse team, and not just in terms of a good gender split, we have 21 different nationalities and we speak even more languages. Diverse groups are more able to draw on members’ varied experiences which leads to improved decision-making, problem solving and more innovative thinking; diverse groups have higher  “collective intelligence”. Collective intelligence has less to do with how smart each team member is and more to do with the make up of the group. This basically means the Red Badger team is VERY wise. See Anita Wooley’s work on collective intelligence for more info. 


Badgers map

A map of our home countries.

 

So we are doing pretty well at Red Badger but something that REALLY, really bothers me is that we have never had a female speaker at the London React User Group – we’ve been hosting these monthly events with 2 or 3 speakers each time for over a year – that’s over 30 speakers and they’ve all been guys. You’d even be challenged to find more than a handful of girls in the 250 strong audience at most of the events. This isn’t unusual – I’ve been at meetups in a room full of guys numerous times – so what do we do? I’d love to hear any ideas- amy.crimmens@red-badger.com

And if you like the sound of Red Badger and think you’d like to be part of our team we’d love to hear from you. Check out our current vacancies here.

23
Jul
2015

How to keep an office tidy: guidance from an Office Manager

by Valentina Soricaro

We are one: a strong company identity

 

Red Badger has one of the  strongest company identities  I have ever encountered in my working life.  We feel strong for the company, we like being part of it and the idea behind it; we are indeed always trying for new and funny ways to enhance this even more.

We just love being Badgers (follow us on Twitter  and you will understand what we mean when we talk about #badgerlife).

 

Ladies Badger monthly dinner #badgerlife

Ladies Badger monthly dinner #badgerlife

 

 

 

I think this is an important factor for a successful working business.

When the  employees feel like  part of the company, they act like they are part of its vital inner core, what can go wrong then? They will work their best magic, because they strongly want the company to succeed, as they will succeed too.

 

Good staff management skills are key to obtain a solid company identity. When your staff is treated well, it  will reward you (on this note you can read the blog written by Cain, one of our founders on why they have decided to take us on a island for Red Badger’s 5th birthday).

 

The office is our everyday  home

 

So the point here is: the Badger identity, the strong feeling we have for this company and for each other has to be applied to our office almost like a transitive property.

We love being Badgers, we work in our Badger office everyday, this has to mean we love our Badger office.

People need to be inner part of the office and need to start seeing it as their second home (after all we spend here the longest part of our days). We  need to almost feel like we  are part of the office, (but unlike furniture we are the vital part of it).

 

Creativity for the bathroom toiletries

Creativity for the bathroom toiletries

 

 

Our vintage stationary apothecary, newcomer in the office

Our vintage stationary apothecary, newcomer in the office

 

 

Not to mention the office reflects and  gives the first impression of what the core of the company really is. Clients understand very well when people are happy. Happy people work better; this means more profit for the company and in simple words more money. And a tidy office space where everything is accesible and in its right place helps make happier people.

 

So it’s all a circle really.

 

The secret is to make people understand that to care about the office means caring about the identity they choose to take, when working for a specific company

To treat the space almost like a living and breathing thing, living and breathing together with them.

Me and some other Badgers with our new awesome vintage fridge

Me and some other Badgers with our new awesome vintage fridge

 

 

9
Jul
2015

GraphQL and The Open Movie Database. From introspection to Inception.

by Albert Still

I recently returned from React Europe 2015 where Facebook released GraphQL, it’s been in production use at Facebook for several years. In a nutshell a GraphQL API opposes REST and add-hoc endpoints, it allows a client to efficiently get all the data it needs in one network request, and it allows a developer to concisely and declaratively express their apps data requirements. 

They released two things: the GraphQL spec and GraphQL.js which is a JavaScript reference of the spec. To learn GraphQL I suggest reading the GraphQL Introduction blog, the spec and the Star Wars specs inside the GraphQL.js repo. 

Using node with restify and GraphQL.js I have created a small app that let’s us query The Open Movie Database with GraphQL. My apps github repo is here and it’s hosted at https://omdb-graphql.herokuapp.com. This endpoint accepts POST requests with a GraphQL query in the body and it will return a JSON result! There isn’t much to my app, the meaty GraphQL file is here and the rest is a vanilla restify app.

A cool feature of GraphQL is introspection. By definition this means “the examination or observation of one’s own mental and emotional processes”. And in this context it means we can inspect the GraphQL schema with GraphQL queries! So lets pretend your busy project manager pinged you my GraphQL endpoint https://omdb-graphql.herokuapp.com and asked you to make a feature for looking up film details. But as you go to ask for the API documentation link you remember introspection! Lets query my endpoint and learn what it can do, then make a query to fetch a movies data.

First of all lets look at the query type in it’s schema. This is the top level entry point into the system and it’s compulsory every GraphQL schema has one.

Here we can see the query object has a field on it called movie that takes a compulsory argument called title in the form of a string. The field returns the Movie type which is of the kind OBJECT, lets take a look at it.

Now we can see all the fields the Movie type has. They mostly all return strings or lists of strings, but the imdb field returns an Imdb type. Let’s take a look at that.

The Imdb type has three fields on it. But they have scalar kinds not seen before. The IMDb id of the film is an ID, the rating is a Float and the votes count is a Int.

Great so know we understand the Movie object and it’s nested Imdb object. Let’s query for the film Inception!

Notice how with GraphQL queries the data we get back matches identically the shape of the query. This is awesome for client developers because they know exactly what they will get back. No custom parsing logic etc. Also it’s important to note no excess data is returned in the response. This is usually known as over fetching. For example imagine I just needed the movies director. In a REST api I would wastefully have to get the whole movie object sent down the wire even though I only want one attribute! 

If you want to play with this GraphQL endpoint I suggest using Postman. Simply send POST  requests to https://omdb-graphql.herokuapp.com with a raw GraphQL query in the body and you will get the JSON result. I lied above, the query type has an extra field on it, see if you can find it…

A few of us are super keen to use GraphQL in production here at Red Badger. Be interesting to see how it unfolds. Follow us if your interested to.

8
Jul
2015

React Europe and GraphQL

by Jon Sharratt

Recently myself plus a few of the Red Badger team packed our hair curlers and rolled out to Paris on the EuroStar for the React Europe conference hosted in Paris.

One of the big topics that I and the team were interested in was GraphQL which turns REST on it’s head slightly. Turns out Facebook have been using it for a good few years and Lee Byron has been working on it solidly for a good while.

React Europe Pass

What is it?

“GraphQL consists of a type system, query language and execution semantics, static validation, and type introspection.”

With this we declare an APIs schema / capabilities (types) up front the API supports in which validation and introspection can be performed. This is coupled with a querying language that allows not only querying of data but also manipulating data using the notion of mutation queries. All this is done via single endpoint rather traditional REST APIs have urls for each resource combined with HTTP verbs and error codes for validation.

If you wish to check out more in regards to the schema and the full capabilities on how you can start creating your own GraphQL APIs Facebook released a draft spec at the conference over at http://facebook.github.io/graphql/. Additionally to this it is exciting to note that Lee Byron built graphql-js https://github.com/graphql/graphql-js/ an implementation as a reference for everyone to start using and hopefully build out GraphQL implementations in other languages.

In the talk at React Europe it really was a shout out to the community to get involved and really evolve GraphQL into something awesome. I really hope this happens it is a fantastic concept especially if you are working on large complex applications with many clients consuming your API or require multiple APIs to be merged into a single data source / API.

So let’s take a look at a simple example to take a look at what is possible. I am currently working on a project that requires some orchestration of Amazon services. So on that note I decided this is perhaps a good place to start to experiment.

AWS with GraphQL

To touch briefly on some the querying power of using GraphQL I decided to start an experiment in wrapping the Amazon AWS Node.js SDK with GraphQL. The main benefits of this is that we can coalesce operations across all of the Amazon services with some awesome GraphQL queries. I don’t really dig into the server code itself but you can take a look on github in how this works.

https://github.com/redbadger/graphql-aws

Querying

Let’s take a really simple query, let’s say we wish to list all of the message queues we have within our Amazon account, the GraphQL query (which are strings) would look something like:

Simple eh!? we can basically send a query of which ever resources we like (that the GraphQL schema has defined / supports) along with the attributes we wish to return to a single endpoint. In this case we just wish to return the url parameter of the queue. Similarly we can then request all of the topic I have within Amazon as below:

As the schema query is aware of both queue and topic types from a single API endpoint this is where the power of querying comes to light. Let’s say that we now want to return both queues and topics but decide that calling them “topics” and “queues” is not what our client prefers. We can use aliases to rename and combine the queries to return the structure of the data you require.

Mutations

Now let’s take a look at mutations, let’s say we now want to create a queue within Amazon in the same light we can create a simple mutation query that accepts arguments, the name of the queue. To create a message queue you simply do the following:

Because a queue is defined as a single type the GraphQL server knows about we can again simply tell GraphQL with attributes we wish to return once the queue is created. Lastly the same combination of multiple queries as above can be applied to mutations. Say I wish to create 2 queues, then 3 topics, check it out!

As you can see this could be quite powerful if you imagine that you could create a queue add permissions, provision servers…. all from describing the Amazon AWS API with GraphQL. I haven’t touched on introspection or the awesome validation in this blog, it is more to give you a flavour of the querying power and open the eyes that there is now indeed a nicer alternative to REST.

If you enjoy using the latest tech like GraphQL, get in touch we are always looking for smart people interested in shiny new tech join us.

8
Jul
2015

London React meetup – June 2015

by Alex Savin

React London Meetup June 2015

It’s summer in London. Despite the sun and Wimbledon outdoor screenings, we assembled once again at cozy Facebook Euston office with fellow Reactors to catch up on the latest cool trends and tools.

Joe Stanton on ES6, React Native and hot code reloading

We’ve got many requests for talks on React Native, and so here is Joe delivering excellent walkthrough, with updates on current status and new features. React Native now includes support for ES6 out of the box, thanks to Babel – which means you can start using most of the ES6/7 syntax goodness today.

Another important news is Apple policy change regarding hot code reloading in native apps. After React Native release Apple added one extra line to the policy allowing hot code reloading for apps using JavascriptCore. Joe went further and implemented a React Native iOS app that connects to the Amazon S3 bucket on startup, checks for updates, downloads new version of itself and on next boot starts using it. From developer perspective this is fantastic news – this means you can deliver features and fixes to the user instantly – as opposed to the usual AppStore approval process that takes several days to get through.

Michal Kawalec on FluxApp framework

Michal presented a web app framework called FluxApp. It is isomorphic, with immutable centralised state and semi/automatically generated actions.

Robbie McCorkell on cross platform development with React

Robbie delivered an important message on code re-usability when developing for Web and native platforms with React. According to a recent tweet Facebook was able to reuse 87% of the code on Ads Manager app between iOS and Android versions. In other news, React 0.14 version will move DOM rendering out of the core package. At the moment it is fair to say that you can re-use your flux architecture, dispatchers, actions, events and data fetching code across platforms. In future it might be possible to also recycle UI components – at least to some extent.

James Dellow on Digital Inclusion Network project

James shared a story of Digital Inclusion Network project where young people get a hands on experience with latest tech and software. 3D printing, virtual reality, software development and necessary tools are all made available for any young person who wants to get involved. There is a Kickstarter campaign currently going to support this project.

Follow us

As usual, you can follow @londonreact for updates on the next meetup and be first in line to get your ticket. Huge thanks goes to Facebook for helping out with the venue and filming of the talks.

26
Jun
2015

Badger Digest June 2015

by Alex Savin

badger

Badger digest is back! Here you’ll find a sneak peak into the most discussed topics on Red Badger internal Slack channels for the past month.

Title image credit: Tiago Cabral

#General

#Dev

  • HTTP/2 Picks Up Steam – it is now enabled by default for all apps on iOS 9
  • The Code Climate Platform launch
  • How to write a Git commit message

When a commit merits a bit of explanation and context, you need to write a body

  • The Web is getting its byte code: WebAssembly. Also, an important tweet by Brendan Eich.
  • The most important part of your CSS – Dominik Piatek on sensitive subject of grids
  • Empire: A self-hosted PaaS built on Docker & Amazon ECS
  • Unit testing React components without a DOM
  • Update on our very own Arch framework

#UX

#Project management

  • Why is UK productivity lower than in many other countries? Podcast episode by BBC Radio 4.

#Conf

#Books

  • That’s Real-Life Responsive Web Design: Meet The Brand New Smashing Book 5
  • Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic Future
  • SurviveJS – Webpack and React. Go from zero to Webpack and React hero.

A tweet for thought

Current state of browser support for high quality image formats.

22
Jun
2015

The most important part of your CSS

by Dominik Piatek

white-13956_640

There is a bit of CSS that you will write or more likely use from a library that will influence your whole project. It is crucial and it’s quality and adequacy can make or break your productivity as you develop. That CSS is the famous (or infamous!) grid.

Laying out things on the web has always been a struggle. You only have to dive into HTML email to see how terrible it was because table layouts are still a thing there. As graphic design practices trickled through to the web and tables were starting to get filled with data instead of layouts, some people discovered that we could abstract some of that CSS into grid systems. And rightfully so – controlling width is one of the most used CSS properties. It was, all in all, a great success. Our grids maybe were not as advanced as in traditional graphic design, but they were a fantastic abstraction that saved us a lot of time.

Then came along responsive design. It demanded a lot more from our humble grid. But as older, buggy browsers were pushed out and using things like box-sizing, inline-block and negative margins became common (and reliable), the grid adapted.

It’s quite trivial to write a grid these days; but it’s not trivial to know when to use inline-block or floats. It’s not trivial to polyfill our good ‘ol grid with flexbox either. Twitter’s Bootstrap grid might not be ideal for your project; you’ll know it when you are going to have to change it all the time. The breaking point will come when you will not use the grid because you will be afraid of the side effects that can cause and you will make little, impromptu, error-prone grids on the spot.

All this should tell you one thing: the grid needs special attention from the developer, from the outset. You can see this by the emergence of tools like Gridset and efforts on bringing the cassowary constraint solver to the web. On most projects, laying out is a massive part of writing HTML & CSS. The better your tools and your understanding of them, the smaller your headaches later.

So what should you do when assessing a grid? Some key points should be:
– how can you safely extend the grid? (ie. what do you do if you need different gutters somewhere down the line?)
– what are the limitations of the grid (ie. how many columns can we have? Can the grid be used in any container? Is there some patterns that should be avoided)
– does it use floats, inline-block (do we need to care about extra white space), flexbox, something else?
– how is responsiveness handled? how can it be extended?
– will it work with other frameworks that we are using?
– how does it fit into the naming scheme used for our CSS?
– what browsers does it support?

If you create your own, setup a test page and run it through Browserstack or similar. Make sure your new rad idea works across the browsers you want consistently. The big benefit of doing this is that you don’t have to settle for the general case of the grid, you can make allowances that your project requires.

Realising the above, I’ve created a library that lets you create grids on demand called Taco Grids. Currently written for the Stylus CSS preprocessor, it’s an experiment in using a flexible tool for creating easily extensible grids. You can read a bit more about Taco in my previous blog post or jump to it’s home page to look at the docs and example usage.

18
Jun
2015

Arch framework – update

by Alex Savin

arch-3d-16x9

Arch framework official logo by Sari Griffiths, Clementine Brown and Blanca Tortajada

Arch is an isomorphic single page app framework built on top of React and Immutable.js. It was announced and open sourced at the  React London meetup in April by Viktor and Tiago. Many of us at Red Badger are really excited about Arch, its performance, flexibility and openness. Last week we had a first of its kind Arch hackathon at the HQ, and here are a few updates we’d like to share with you.

Official Twitter handle is reserved – it’s ArchFW. Follow it to get quick updates on development and future events (especially if you’re in London!). It is also one of the quick ways to contact team, ask questions and get feedback.

New dedicated organisation is now available on Github – Arch-js. It contains all Arch -related repositories, including Core of the framework, command line client and example apps from the original announcement talk.

We invite you to join the discussion under the core repository. Post issues you encounter, or comment ongoing topics. If you have an idea on missing example app that would enable you to try the framework, feel free to add it here.

Crash course into Arch and functional web programming is now fixed and available for brave new users. You’ll find even more chapters on Arch internals, concept of immutables, cursors and isomorphism in the docs folder. We also have reserved domain archjs.org for the upcoming webpages.

And don’t forget the talk from London React meetup by Viktor and Tiago with introduction to Arch and apps with centralised state.

What’s next? Few things:

  • More sample apps, in ES6 and Livescript
  • Designing more powerful routing DSL
  • Default support for unit tests
  • Improving command line client

Arch is now properly open sourced with BSD 3 license. We hope you’ll like it.