Reactive subscriptions with Apollo and React

Apollo server and client support real-time subscriptions with web sockets. Compared to Meteor’s out of the box real-time communication this is a lot more difficult to set up. With this short tutorial I’ll give you an example of how you can get a simple reactive subscriptions into your Apollo/React app. The idea is that you use real-time communication for a specific case only, f.g. sending notifications. We will accomplish this in five steps.

  1. Install project requirements.
  2. Setup the server schema.
  3. Add server resolvers.
  4. Setup the client subscription.
  5. Modify a component to receive data from a subscription.
    Continue reading “Reactive subscriptions with Apollo and React”

California and Costa Rica

During the last seven weeks I’ve spent a lot of time in California. With my study class we worked on projects with local companies in the Silicon Valley. It was a great experience. For the weekends I had decided to visit Yosemite and the beautiful lake Tahoe again. Despite the Californian drought I had some good hikes there. Before leaving for home I took a flight to Costa Rica and spent a week there. Seeing the caribbean coast not on a post card was a very nice thing. Now here are some pictures you might like:

Public transport in America is hard to endure as a swiss.
Public transport in America is hard to endure as a swiss.

Continue reading “California and Costa Rica”

Graphql with Apollo, Meteor and React

For my last project I had to build a web application to administrate a MongoDB database. Due to using Meteor quite a lot I heard about Graphql and the Apollostack. Graphql, which is a specification done by Facebook engineers, promises to be the better REST API (which I hope it is). I became curious and decided the build the server API with Apollo. First I tried to evade using the Meteor as build system as I don’t want to get too accustomed to this full-stack ecosystem. However, building a live-reload server and client build system in ES6 with Node.js, Babel and Webpack was simply too much work compared to building this simple web app. So in result this was my stack:
Continue reading “Graphql with Apollo, Meteor and React”

Chatbot dialog design – a best practice proposal

While working on a new chatbot I had to come up with good examples to start and led a conversation with the chatbot. For this I analyzed other bots, tracked the steps it takes to achieve a specific goal and kept notes on repeating patterns. In result me and my team came up with a few basic principles to design dialogs in conversational bots.
Continue reading “Chatbot dialog design – a best practice proposal”

Node.js dynamic settings

As I’m relatively new to Node I had to wrap my head around a very basic thing. Getting external variables into my app. Loading settings for different environments from config files and via environment variables (for heroku deployment) should supposedly be an easy challenge. However, none of the solutions I’ve found were well enough for my scenario:

  • Store config in json file.
  • Have different configuration files (development, production, …).
  • Load configs from environment variables.
  • Fallback from environment to config file.
  • App lives in one folder.
    Continue reading “Node.js dynamic settings”

Hello Google Cloud Platform and good bye AWS

Yesterday late afternoon I had the great idea to update my AWS EC2 instance to Ubuntu 16.04 LTS. This website and two other sites are hosted on this machine. A Piwik installation and a mail forwarder as well. So it’s not that much, but still very essential to me. The upgrade didn’t go well, the system literally broke.
Continue reading “Hello Google Cloud Platform and good bye AWS”

OLMOTO – An app built by beginners

One month ago I started teaching a friend the basics of JavaScript with Meteor, Mantra and React.
Together we’ve built an app to create and share events with friends. It was an awesome experience. Yesterday we launched a private version on heroku. For us this was a great accomplishment. I learned a lot from this project and thought about sharing it with world.

https://github.com/janikvonrotz/olmoto

Some technical features and challenges we solved:

  • Access control for methods, publications and routing.
  • Mobile first ui with material design.
  • Fulltext search everywhere.
  • File upload to Dropbox with Meteor-Files.
  • Images with different thumbnails.
  • Keyboard navigation in single views.
  • Ready for deployment to heroku.

Thanks to the makers of Meteor, React, Mantra and Mantra-CLI.

React image loader with a spinner

hey there, I’ve spent as usual a lot of time with React, Mantra and Meteor. While building a simple app I checked out the new Meteor standard for file handling Meteor-Files. It works great, I really recommend this awesome package. But that’s not what I want to show you. The app I’m working on loads pictures form the dropbox api. Downloading the pictures always takes a while. To make sure the user doesn’t get impatient the app is now displaying a spinner when the image is loading. I would to like to show you how I’ve built this image loader and spinner component.
Continue reading “React image loader with a spinner”