devalias.net https://www.devalias.net Follow me into the rabbit hole that is my mind and learn about topics including.. security, technology, efficiency, biohacking, health, personal growth and probably a whole lot more. en_GB GraphQL: Why You Should Care /devalias/2016/09/07/graphql-why-you-should-care/ devalias 2016-09-07T00:00:00+10:00 /devalias/2016/09/07/graphql-why-you-should-care/ If you haven't yet come across GraphQL, it's kind of exciting stuff. It's a query language developed by Facebook, that basically lets you request exactly the data you need for the given task; no more, no less. Sounds good right?

Tell me more..

If you like to get into the nitty gritty of tech specs, you can head over to the GraphQL Working Draft (GitHub) to have a deeper read, then play around with the reference implementation in JavaScript.

Though if specs aren't really your style, check out 'Learn GraphQL' and give their free short course a run through. Should get you up to speed!

Ok. I'm in!

Excited? Want to dive into it? Need libraries for your particular tech stack? Head on over to the Awesome GraphQL list. You're bound to find what you need!

For my particular tech palette I was after something Scala'esque, maybe some Akka-HTTP to go with it. Seems I wasn't the only one! Sangria (GitHub) is a Scala GraphQL implementation. They even have an Akka-HTTP based example. Perfect! Throw in a little Relay support and this package is pretty much complete.

If you're looking for an all-in-one stack heading forward, I keep seeing a lot of good things posted by the team at Apollo Stack (by the Meteor team), so would most definitely recommend keeping an eye on them. They also post a lot of really good articles on their blog too.

For some further reading, make sure to check out:

GraphQL and Relay.. What about Redux?

A lot of things you'll read about GraphQL on the net will talk about it quite closely with Relay, and given they were both released by Facebook, and sort of designed to work together, it makes a lot of sense. That said, you most definitely don't need to use Relay to take advantage of the awesomeness GraphQL provides!

KADIRA states it pretty well in GraphQL vs Relay:

GraphQL provides a way to model and expose data in your app. You can use it on top of any kind of data source and use it with any kind of transport layer.

Relay is an efficient client-side data-fetching technology built for React. It talks to a GraphQL Schema to get data. Relay also has a server-side part that adds some features on top of GraphQL.

There is a bunch of talk about how Relay is currently a pain to use, but Facebook seems to be well aware of this issue and has future plans to make it much nicer to work with.

I think it's definitely worth keeping an eye on Relay in the future, but if you're not quite ready to jump in, you can always take advantage of the benefits of GraphQL while sticking to something like Redux (GitHub). For further reading:

GraphQL vs Falcor

So by now we should have a fairly good idea about what GraphQL is. So what's Falcor? This one comes from our friends over at Netflix. In essence, it turns all of your data sources into one giant JSON graph. Regardless of whether you're loading data remotely, have it cached locally, etc; you'll access it in the same way.

If you want to read deeper, I found these to be quite useful:

The consensus that I came to is that it seems to be on par with GraphQL in a number of ways, but is probably a bit easier to implement and a bit less powerful overall. Apparently you could even go so far as to query GraphQL with Falcor, but not the other way. For my purposes, I think I'll be sticking with GraphQL.

It's also worth noting that Facebook has been using various flavours of GraphQL for a few years now, whereas Netflix is yet to (or has only recently) started using Falcor in production.

API's: REST, HATEOS, Observables.. GraphQL!

I have read SO many articles over the years about the 'proper' way to design API's, and why styleX is so much better than styleY. With so much info out there, and so much conflicting advice (even within each supposed style), it's really easy to get stuck in analysis paralysis.

Greg Ziegan put together a nice little article talking about his progression along this path: from REST, through HATEOS, observables, etc; and how he ended up at GraphQL. Following on from this, Sashko Stubailo makes a pretty good argument about why GraphQL is "the next generation of API design".

While the benefits of a GraphQL-based API seem pretty obvious to me, it's not always feasible to jump straight into shiny new tech. Maybe you need to support legacy services, interact with 3rd-party API's, or allow other developers to consume your API without them having to learn the ins and outs of GraphQL. But thankfully, we don't need to pick one over the other!

The GraphQL team have a pretty good article on their blog about wrapping REST API's in GraphQL, starting purely with the client-side, and later moving it to the backend. This idea plays in SO well with some little side-projects I've been thinking about over the years, and how it could be used to help decompose and combine existing API's.

Conclusion

This is a scattering of the articles and things I have read through while learning more about GraphQL, and why it is so awesome. I definitely know it's a technology that I am super excited to start utilising in my future projects.

Have you come across any other awesome articles/tools related to GraphQL or similar? I'd love to hear about them! Let me know in the comments below.

]]> Starting a New Web Application (Part 1): An Exploration of Options /devalias/2016/08/24/starting-a-new-web-application-1-an-exploration-of-options/ devalias 2016-08-24T00:00:00+10:00 /devalias/2016/08/24/starting-a-new-web-application-1-an-exploration-of-options/ Finding myself with some free time (and looking into starting a new project), I thought I might catch myself up on the state of web technologies, and what might be a good stack to work with.

The details collected here are most certainly not a complete layout of the entire landscape, and there will no doubt be leanings toward my personal tastes (reactive, api-driven, etc). You should use this more as a starter into your own deeper research than as a source of ultimate truth. With that out of the way, let's get into it!

Quicklinks

Frontend

The frontend is the pretty, interactive, main part that people will be seeing. You can have the most amazingly streamlined and perfect backend code, but noone's going to notice and love it without a strong frontend to back it up.

Frameworks

The days of raw JavaScript and jQuery selectors is long gone. We're looking for a nice, modern framework to help put together our frontend. Here's a little selection of some of our options:

As with most things, every man and his dog has their own opinion, so here are a few comparisons I found useful:

UI

Even if you like to go oldschool and code your site by hand in notepad/vi, you can't deny the ease/benefits of using a frontend UI framework.

Can't decide? Try some comparisons:

Scripting

Modern web apps live by the functionality they enable in the browser, and to do this, we need a JS-esque language. Your chosen frontend framework may sway your choice (eg. Angular (v2) has a strong preference for TypeScript), but ultimately, it's up to what you/your team feel comfortable with. With so many options out there, it's hard to pick.. And of course, you could always stick to plain JavaScript.. and with the new features coming in ES6 (eg. promises) and beyond, it might be a good choice.

  • Babel
    • A transpiler that lets you play with all the fun features of JavaScript ES6 and beyond, while maintaining compatibility with all of the older browsers.
  • TypeScript (GitHub)
    • "TypeScript is a typed superset of JavaScript that compiles to plain JavaScript"
    • If you're using Angular (v2) and like sticking to convention, this is the one for you.
  • CoffeeScript (or maybe v2)
  • Flow (GitHub)
    • While it's not a language unto itself, it does allow you the benefits of typed JavaScript without having to dive into something like TypeScript.
  • Scala.js
    • A little left field, this transpiles Scala code into JavaScript. While I probably wouldn't see myself using this as a main choice, it could make for some interesting reusability between front and backend.

Backend

My preferences for backend tech stacks lean heavily towards Scala and the Lightbend Reactive Platform these days, but I will make quick mention of some of the other options available.

Tooling

With the crazy mix of technologies and steps involved in modern web app development, it makes a ton of sense to tie it all together with some automation.

While a little different in purpose to the things mentioned above, getting everything nicely tested and deployed is always good:

Conclusions

Hopefully this has given you a decent starting point for figuring out what combination of technologies is going to work best for your next project. If you want to see the direction I've decided to go, make sure you read on in Part 2.

Have I missed something important? Not given love to your favourite stack? Got a cool pointer? Or just want to say hi? Let me know in the comments!

Updates

  • 2017-04-11 Added some more backend web frameworks, updated akka-http link, fixed some formatting
]]> Dogedraw, now with more Nyaan! /devalias/2015/04/20/dogedraw-now-with-more-nyaan/ devalias 2015-04-20T12:00:00+10:00 /devalias/2015/04/20/dogedraw-now-with-more-nyaan/ Over the last few days I've been mentoring web dev at HS.HACT.IO, inspiring a group of younger kids to get into tech as creators. One of the other mentors showed us a site he previously put together, DogeDraw. After playing around with it for a little, I decided it was a little too manual, so started hacking away in the JS console to make it more fun.

A little while (and far too long typing out pixel art as code) later, and we have nyaan hacks! You can clear a section of the screen with a solid block of colour, or better yet, stamp out some pixel art nyaan cat across the page!

https://gist.github.com/0xdevalias/e8bb28726a37854606ad

# Dogedraw, now with more Nyaan!


Paste these functions into the js console on https://dogedraw.firebaseapp.com and run them to nyaan nyaan nyaan..


Developed at http://hs.hact.io 2015!!


function clearScreen(w, h, color) {
  var pixelDataRef = new Firebase('https://dogedraw.firebaseio.com/pixels');
  for (var i = 0; i < h; i++) {
    for (var j = 0; j < w; j++) {
      pixelDataRef.child(j + ":" + i).set(color);
    }
  }
}
    
function nyaan(startX, startY) {
  function rpt(value, times) {
    var arr = [];
    for (rpti = 0; rpti < times; rpti++) {
      arr[rpti] = value;
    }
    return arr;
  }

  function cc(arr) {
    var joined = [];
    for (cci = 0; cci < arr.length; cci++) {
      joined = joined.concat(arr[cci]);
    }
    return joined;
  }

  var nyaanHax = new Firebase('https://dogedraw.firebaseio.com/pixels');

  var w = "fff" // white
  var bl = "00f" // blue
  var k = "000" // black
  var r = "f00" // red
  var gy = "333" // grey
  var gr = "0f0" // green
  var y1 = "FFFFE0" // pale yellow
  var y2 = "FFFF00" // yellow
  var o = "FF4500" // orange
  var p1 = "FFC0CB" // pink
  var p2 = "9370DB" //purple
  var p3 = "800080" // dark purple

  var nyaan = []
  nyaan[0] = rpt(w, 38)
  nyaan[1] = cc([rpt(w, 3), rpt(r, 6), rpt(w, 7), rpt(k, 14), rpt(w, 8)])
  nyaan[2] = cc([[w], rpt(r, 14), [k], rpt(y1, 14), [k], rpt(w, 7)])
  nyaan[3] = cc([[w], rpt(r, 3), rpt(o, 5), rpt(r, 5), [k, y1, y1], rpt(p1, 4), [p2, p1, p1, p2], rpt(p1, 3), rpt(y1, 3), [k], rpt(w, 6)])
  nyaan[4] = cc([[w], rpt(o, 13), [k, y1], rpt(p1, 2), [p2], rpt(p1, 4), [k, k], rpt(p1, 5), [y1, k, w, k, k], rpt(w, 3)])
  nyaan[5] = cc([[w], rpt(o, 3), rpt(y2, 4), rpt(k, 4), rpt(o, 2), [k, y1], rpt(p1, 6), [k, gy, gy, k], [p1, p1, p2, p1, y1, k, k, gy, gy, k], rpt(w, 2)])
  nyaan[6] = cc([[w], rpt(y2, 6), [k, gy, gy, gy], rpt(k, 4), [y1], rpt(p1, 6), [k, gy, gy, gy, k], rpt(p1, 3), [y1, k, gy, gy, gy, k], rpt(w, 2)])
  nyaan[7] = cc([[w], rpt(y2, 3), rpt(gr, 3), [k, k], rpt(gy, 5), [k, y1], rpt(p1, 3), [p2], rpt(p1, 2), [k], rpt(gy, 4), rpt(k, 4), rpt(gy, 4), [k], rpt(w, 2)])
  nyaan[8] = cc([[w], rpt(gr, 8), rpt(k, 4), [gy, k, y1], rpt(p1, 6), [k], rpt(gy, 12), [k], rpt(w, 2)])
  nyaan[9] = cc([[w], rpt(gr, 3), rpt(bl, 8), rpt(k, 3), [y1], rpt(p1, 4), [p2, k], rpt(gy, 3), [w, k], rpt(gy, 5), [w, k, gy, gy, k, w]])
  nyaan[10] = cc([[w], rpt(bl, 13), [k, y1, p1, p2], rpt(p1, 3), [k], rpt(gy, 3), [k, k], rpt(gy, 3), [k, gy, k, k, gy, gy, k, w]])
  nyaan[11] = cc([[w], rpt(bl, 3), rpt(p3, 5), rpt(bl, 5), [k, y1], rpt(p1, 3), [p2, p1, k, gy, p1 ,p1], rpt(gy, 9), [p1, p1, k, w]])
  nyaan[12] = cc([[w], rpt(p3, 12), [k, k, y1, y1, p1, p2, p1, p1, k, gy, p1, p1, gy, k, gy, gy, k, gy, gy, k, gy, p1, p1, k, w]])
  nyaan[13] = cc([[w], rpt(p3, 3), rpt(w, 5), rpt(p3, 2), rpt(k, 4), rpt(y1, 3), rpt(p1, 4), [k], rpt(gy, 3), rpt(k, 7), rpt(gy, 2), [k, w, w]])
  nyaan[14] = cc([rpt(w, 10), [k, gy, gy, gy, k, k], rpt(y1, 7), [k], rpt(gy, 10), [k], rpt(w, 3)])
  nyaan[15] = cc([rpt(w, 10), [k, gy, gy, k, w], rpt(k, 19), rpt(w, 4)])
  nyaan[16] = cc([rpt(w, 10), rpt(k, 3), rpt(w, 3), [k, gy, gy, k, w, w, w, k, gy, gy, k, w, k, gy, gy, k], rpt(w, 6)])
  nyaan[17] = cc([rpt(w, 17), rpt(k, 3), rpt(w, 4), rpt(k, 3), rpt(w, 2), rpt(k, 3), rpt(w, 6)])
  nyaan[18] = rpt(w, 38)

  for (var i = 0; i < nyaan.length; i++) {
    for (var j = 0; j < nyaan[i].length; j++) {
      nyaanHax.child(parseInt(startX+j) + ":" + parseInt(startY+i)).set(nyaan[i][j]);
    }
  }

  return "I drew a cat!"
}
```</pre></noscript><script src="https://gist.github.com/e8bb28726a37854606ad.js"> </script>



	  ]]>