Fun at the Functional Programming Meetup

by Amy Crimmens

Last night we hosted the second “Functional Programming for the Web” meetup. We had quite a meaty line up – with Elm, Haskell AND Clojurescript all on the lineup.

Kris Jenkins kicked things off with an Elm joke and set the tone for the rest of the evening really. It’s a relaxed event and a friendly group, everyone is very keen to help each other out and there are always some great discussions after the talks.

The lineup for the night went like this-

  • LOTS of pulled pork burgers and quesadillas from Bodeans and some beers

  • Using Elm for Real Work – Kris Jenkins

  • Practical Haskell in the browser with Reflex and GHCJS – Christian Takle

  • Clojurescript for Next Generation Webapps-  Sonny To

  • More pulled pork and beers.

A full recording of the event is up on our YouTube channel-  

When we started talking about setting up this meetup we really wanted the talks to be practical and not just lots of theory; I think we’ve managed this nicely.

We plan to hold the meetup every 6 to 8 weeks to start with. You can keep up to date with event announcements and whatnot by joining the meetup group and by following Red Badger on Twitter .

We may have a really amazing speaker visiting from overseas for the next meetup but that’s top secret at the moment, we’ll make an announcement as soon as we can.



Fortnum’s site makes Red Badger BIMA Awards winners!

by Hanna Cevik

Last night Red Badger and Fortnum & Mason won at the BIMA Awards! We took home the trophy for Best Web Design & Build for the eCommerce site and we could not be prouder.

BIMA award winners

We were up for Best Customer Retailer as well as the Best Web Design & Build Award, so it was really exciting to see our name flash up on the screens the second time around! We were up against some great competition; you can see the shortlist here.

Members of both Fortnum’s and the Badger teams were at the event under Waterloo Bridge. It was a little different to the usual award ceremony format, being more of a party with canapés and bowl food, endless drinks and Norman Jay MBE on the ones and twos. Some awesome moves where pulled on the dancefloor, and once we’d won, the wine was replaced with celebratory (but not personalised) champagne!

Thank you

We’d like to thank the BIMA team for an ace evening, and blame them for a few sore heads in the office this morning. We’d also like to give so much respect to the Fortnum’s web team, who are incredibly knowledgable, talented and great to work with. We hope to continue working with them for many years to come!

sleepy CEOmoody COORed Badger Fortnum's team win BIMA awardCOO



Recap: First Functional Programming for the Web meetup

by Tiago Azevedo

We recently decided to expand our horizons beyond the quite successful React meetup we host every month. The result was the functional programming for the web meetup – with the inaugural first meetup held last month.


Joe Stanton – The Functional Landscape 

As an introduction to functional programming in general, Joe gives us an overview of object orientation – or more specifically the problems that concepts like state everywhere and mutability bring, along with how functional programming solves these issues and makes writing safe, predictable, multi-threaded code much simpler.

Joe compared building a user interface in JavaScript with React – where your UI is simply a function of data UI = f(data) - to the fundamentals of functional programming y = f(x). This means your UI is predictable and reproducible - enabling you to do things like taking the state of a user’s application and loading it up in your own browser for debugging, or server-side rendering which can give massive performance benefits as well as support for browsers and devices that don’t support JavaScript.

Coincidentally – this was also a great intro for our next talk.

Viktor Charypar – The immutable truth

Many of us are aware of the benefits of immutable data – but there are a lot of questions left unanswered – most prominently how can copying a whole tree of data be efficient compared to changing a simple value?

Viktor’s explanation was a very easy to digest approach to explaining the inner workings of immutable data structures. We are shown the origins of structural sharing and tries and how these concepts merged together to form what we consider a very performant data store.

He outlines Joe’s explanation of purity and predictability – noting how immutable data makes for predictable functions and more predictable functions means code which is easier to debug, read and reason about.

Tomas Petricek – F#

Tomas’ talk was the outlier of the three – no javascript? But this meetup is targetted at the web!

Tomas introduces us to the the basic concepts of F# as a functional language and as a web platform. We were introduced to the type system in F#, the Suave web framework (think express for F#), DotLiquid – a templating system for .NET, dependency management through Paket, and type providers.

Providers allowed us to connect and fetching external resource feeds (json, xml, etc.) into your application. A very cool feature is using these external data sources at compile time and inferring types from them, so you can know if you’ve made a type error even if you’re loading the content dynamically. Through editor plugins, F# can also do this inferring as you type – providing you with autocomplete for things that aren’t even defined locally! Powerful stuff.

A live demo followed Tomas’ explanation of these concepts from fetching a news feed, a weather feed and injecting the data into a template which is rendered and served to the client. We also get a sneak peek at deploying to both Heroku and Microsoft Azure. Definitely worth a watch!

Full recording of meetup is available on YouTube.

You can follow Joe, Viktor, Tomas and myself on twitter.

Next month’s meetup will be on the 30th September, make sure you don’t miss it!


Give it 5 days – Facebook Relay and GraphQL

by Albert Still

Relay schema screenshot

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.


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!


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 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.


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




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.


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.



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.


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.


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.