React Native Isomorphic app in a weekend

TeamParrot is an app that reads your Slack scrollback out loud so you can listen to your coworkers while doing awesome stuff.

Because I work in a distributed company and have coworkers all around the globe, every day I wake up to a full wall of scrollback to go through. Some of it is actionable, some of it is just chatter, but its good to at least have a vague notion of what is going on.

I also value efficiency and not wasting time, so I came up with TeamParrot.

Having an app in the app store was on my Bucketlist for some time, so I jumped on this simple idea like an angry Twitter user on a chance to humiliate someone.

These days, I usually work with React and React Native seems like an ingenious way to get my feet wet in the pool of app development

Before we even start, I assume you read the official docs – they are pretty decent these days.

Starting a React Native project

Starting an RN project was pretty easy and as many projects these days, starts with a generator.

You have to install RN as a global npm module and then you generete a project, as noted here:

npm install -g react-native-cli
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

You just provide a name and then the tool creates a project for you.

The project builds in XCode and Android SDK.

Few notes about Android sdk:

  • You DONT need Android studio and it is a terrible piece of software
  • Android SDK is a set of command-line tools
  • These tools install their own libraries, device images, etc. There are multiple versions and each of the files is surprisingly huge. That is one of the reasons that Android development is such a hassle. I would really love some cloud build system
  • Emulating is also a hassle. Genymotion was good solution for me, but you need to point it at the same image files you use to build your software

Renaming a React Native project

Of course I provided a bad name and then had to rename my project. Read about it here:

https://piszek.com/2017/02/07/react-native-rename-my-app/

Using external APIs

Your app needs to connect to an external Oauth? We got you covered!

https://piszek.com/2017/01/29/react-native-oauth/

Using libraries / internal APIs

As you may have heard, React Native does not use WebView like many other JavaScript mobile app technologies ( Cordova for example ).

In RN, higher-order native components ( sometimes big pieces of an app ) are used to piece together you interface. These components have JavaScript wrappers and you can use them as you would any React component. Because these components are pure native, the app behaves just as fast as native. Many components are already wrapped by Facebook in the official repo, even more have sprouted as npm modules. I needed Text-to-speech library for TeamParrot and I found a few.

If you are using a component/library that adds some native code, you need to link it.That means adding the native code parts to the build process of your app. Usually, the automatic tool `rnpm` will do that for you, so when you type

rnpm link

or

rnpm link library-name

You should be done.

Sometimes it involves few manual steps – putting imports here and there in the native code.

Adding flair

Few pieces like that require fiddling with the native code are Icons and Fonts:

https://piszek.com/2017/02/01/react-native-vector-icons-fontawesome-and-others/

Files structure and isomorphic code 

zrzut-ekranu-2016-11-12-o-19-37-20

By default, you will have `index.ios.js` and `index.android.js` and as you can imagine – one is an entry point for your app in iOS, the other is the entry point for you Android code.

By default, your codebases are separate, but don’t be discouraged! There is one weird trick that programmers will hate you for!

Just put this both in `index.ios.js` and `index.android.js` :

import { AppRegistry } from ‘react-native’;
import Main from ‘./main’;
AppRegistry.registerComponent( ‘YourApp’, () => Main );

That way, both of your entry points use the same main component.

My folder structure of choice is

  • android
  • app.js – main logic
  • assets
  • components – these are dumb components
  • config
  • index.android.js
  • index.ios.js
  • index.web.js
  • ios
  • lib
  • login.js
  • node_modules
  • package.json

What is “index.web.js” you ask? Well, this app builds in web too! That means that I can develop my UI in chrome devtools !

Read more about isomorphic prototyping here

Release

Is your App ready for the big day? Not so fast! You have to submit it to the review.

Releasing in App Store

  1. Get Apple developer account
  2. Register yourself in itunesconnect
  3. Create your provisioning keys in XCode
  4. Create a bundle
  5. Sign it
  6. Upload to App store
  7. If you want to invite beta testers, you still need to submit it for a review

You want to update your app post release? Dont forget to configure CodePush! 

Maketing

 That is an entry even in itself and maybe a post for later!

But with these steps you should be able to make most of the simple apps out there.

Some other valuable links

React Native Isomorphic app over the weekend

This article is part of my “React Native Isomorphic app over the weekend” series. It shares the problems I encountered during development of TeamParrot and Headstart Journal.

I wanna be a programmer! A journey.

Ordinary World

Chuck was few years into his career. He was sitting at a desk for most of the day, doing menial and repeatable tasks, filling out Excel spreadsheets and agonizing over “ASAP” PowerPoint presentations that nobody really paid attention to during meetings that were absolutely unnecessary.

But the absolute majority of his day was consumed by Facebook. Be it boredom or burnout, he compulsively checked his stream. And to add salt to the injury, pretty often he would stumble into a story how those fresh-out-of-college programmer-people got an obscene salary, office restaurant, laundry, assistant or something as ridiculous as an office with michelin star-train chefs for YOUR DOG. No, seriously.

cmkkvd7vyaa0xxb

Call to adventure

IMG_0300

Chuck said to himself: I wanna be a programmer! I have plenty of friends in the industry and I will ask them what to do.

Refusal of the Call

IMG_5054.JPG

 Lets start with education. I don’t have any formal engineering education! These people had to learn this in school, didn’t they? Maybe it’s not such a great plan, I don’t want to spend another 3 years studying something, do I?

Supernatural Aid

IMG_3406.JPG

After a chat with one of his friends, he learned that IT is one of those weird professional industries, where formal education is not that important. In many other industries, you show your diploma to convince prospective employer that indeed, you know what you are doing. But in IT, diploma is close to obsolete because the education has trouble keeping with technological progress.

You don’t need formal engineering education

Furthermore, programmers are in high demand. In Silicon Valley, companies are poaching employees from each other because the demand highly outgrew “tech talent” there.

Should I go for code bootcamp?

Bootcamp is an intensive few-weeks coding course. It worked for some of Chuck’s friends, but he knew that it would be a bad choice for him. He was always a self-learner and he despised the fact that in a group setting you need to go as slow as a dumbest person in the class or sometimes he needed more time but the group needed to push forward.

One advantage of coding bootcamp is discipline and accountability. The are in charge and they motivate and keep the score. In Poland, Coderslab appealed to him and he wasn’t girly enough for girlsjs, but he wanted to learn on his own terms.

Crossing the Treshold

SONY DSC

A friend recommended Code.org to Chuck. It was created by Facebook and few other companies as an effort to teach kids how to code. Chuck played with few lessons and decided he felt confident enough to try something more serious.

The road of trials

IMG_0992

What programming language should I learn?

When he started asking this seemingly innocent question, clearly he had no idea what he  was getting into. He didn’t mean to question anybody’s religious beliefs, but every time he brought the subject up, he got a different, strong opinion.

Chuck decided to listen to Artur’s advice and learn JavaScript. Following arguments convinced him:

  • JavaScript is one of the few languages that can be used in many layers of application. That meant that he would be able to switch positions without acquiring new language,
  • With React Native and other approaches it is now possible to also write mobile apps in JavaScript. If he decided to, he could write his own apps!,
  • JavaScript ecosystem is still growing rapidly. The demand will only grow.

So he started taking advantage of the amazing free material available on the web:

He also heard good things about a comprehensive free “How to be a programmer” guide.

The inmost cave

Contribute! Show off!

IMG_0421

Chuck decided to call one of his friends who was responsible for hiring in a huge company.

  • “Listen”, asked Chuck, “If you are not looking at diplomas, how DO you know who to hire?”
  • In many companies it boils down to something called “technical interview”. Honestly, it’s exam-like situation, where we ask technical questions, ask you to solve some problems and generally grade you
  • Is this a reliable process?
  • No, it’s very sloppy and a bit random.
  • Ok, but how can I prepare?
  • I recommend Cracking Code Interview. These are hard and this books is really all you need to get into Google or Microsoft. But in many companies it’s MUCH easier. Usually it’s a few random questions related to specific programming language.
  • Is there something else you would recommend?
  • Open Source projects! It’s an easy way to get experience and make your CV stand out.
  • How do i start with that?
  • Start with Contributing to GitHub. There are plenty of projects that would appreciate help. You will learn  A LOT! Pro tip: Best way is to try to set up the project and start by fixing the “README” files. If you had to overcome some obstacle – fix the readme’s before the code. The maintainers of the project will appreciate your help and it will count as contribution. Also check out this guide on starting your Open Source contributions
  • Thanks for the chat!

The supreme ordeal

How do I get motivation?

IMG_4922 (1)

At this point Chuck felt a bit overwhelmed by possibilities and work to be done. Fortunately, one of his friends had a masters degree in psychology, so he asked him how to find a drive and strength to push forward.

His friend responded:

I have learned more about self-motivation from “Awaken the giant within” by Tony Robbins than during 5 years of psychology.

The book was a splendid recommendation. Chuck never felt so driven to get this done!

Reward

How much will I earn? How to find a job?

IMG_2013

Chuck started asking himself what he should learn in order to get a job. What are the requirements? He heard it’s much better to just look for the offer in specific programming language he knew, so he can focus on improving his skills before he starts learning more.

The Road Back

I want to work remotely, like this Artur person!

What is this remote work? How come Artur is writing posts from all over the globe? Chuck managed to call Artur and ask how to get remote work

“Chuck, listen: there are some fully-distributed companies, but they are only functioning because people there are self-driven. It’s hard to control people when they are not in the office, so we need to be very careful in hiring. Almost always they require prior experience and I highly recommend first starting in some other company”

Resurrection

What’s next?

At the beginning of his programming career, Chuck decided to go for big / medium company. He heard, that he definitely should not join “a cool startup of his friend”. It could be bad for him and the startup.

  • Big company has processes and resources to teach more basics
  • His shortcomings will have little impact on the final result
  • There will be more “newbies”, so he wont feel like the only one without 10+ years of experience
  • There will be plenty patterns / good practices to absorb
  • In a big company it’s much easier to know what he doesn’t know

Chuck got a cool job at Samsung. He decided that he will learn constantly in his new job and after 2 years of corporate experience, he will try to step up the corporate ladder or get a better position somewhere else. Changing job in tech every ~3 years is considered normal.

Be smart, be like Chuck. Be a programmer. It’s awesome.

Return

Why are these header titles so weird?

Other stuff I do

These are the apps I am currently developing. Subscribe for lessons learned while developing:

Secret patterns of flavour

In March 2016, while helping to organize TEDxWarsaw, I had a great pleasure of working with James Briscione on his amazing talk “Secret Patterns of flavour”. This fulfilled my Bucketlist item #4.

James is a head of Institute of Culinary Education in New York and together with IBM created “Cognitive Cooking with Chef Watson” book and app. He explores the science of flavour and how different chemicals come together to create a symphony of taste we all enjoy and crave. Since I call myself a Cognitive Engineer and am a foodie, Cognitive Cooking seemed like something extremely interesting and I jumped at first opportunity to help.

Finally, we have a recording to show James’s amazing work:

 

For me personally, it was an amazing journey and a great privilege. James lives on the bleeding edge of cuisine innovation and it was inspiring to meet him and see the final talk and learn a lot!

Some interesting links

 

So you want to work at Automattic?

Today, it’s been precisely 6 months since I joined Automattic as JavaScript wrangler. All you’ve heard about how awesome this company is in fact an understatement!

It is out of this world!

IMG_0951

Working from out of this world.

One of the things you have to know about me is, that I fit right in with the whole `Tim Ferriss fanclub` type of crowd. It is not religious in any way, I just like the content he exposes me to and I enjoy tips, tricks and `weird shit from the world of esoteric he digs up`, as he himself puts it so eloquently. Some of my friends don’t share this enthusiasm, but it’s beside the point 🙂

Tim Ferriss in the 4-hour workweek introduced me to this idea of “Geo-arbitrage”. Basically, he says: for Americans it is extremely easy to travel, because the money they make in US can go a long way in other, cheaper spots on the map, so it would be a good idea to become a remote employee, travel the world, all while living a good life abroad.

Awesome! Work that allows you to travel AND save compared to your usual expenses? Where do I sign up?
Except, there’s one problem with that: I live in Poland. The only place that our salaries let you live on a decent level is Romania. And cheaper parts of Poland.

Nevertheless, I tried to make this happen. With one of my friends I started an e-marketing agency (Netivo) which I helped run while studying in Sweden. Turns out it’s pretty hard to travel, run a business and make enough money in Poland to live decently in Sweden (that plan is an example of reverse geoarbitrage and is generally a challenge stupid idea). But in that line of business I had to work A LOT with WordPress and became quite fascinated with it to be honest. I decided to become kind of an “WordPress” expert since.

Then the crash of 2008 made everything more difficult. I switched to JavaScript and found a career in safer, bigger companies as a JavaScript engineer.

I was quite happy, but in 2015 I started to crave greater things in life. I felt that world is moving forward, all these startups are sprouting all over and people get to change the world. In Silicon Valley, or even in Western Europe people could be proud of the stuff they build, all while working with the newest technologies or programming paradygms. In Poland, it felt like an “IT Callcenter”. We are good, reliable and cheap, but we were not on the bleeding edge of the innovation razor.

Then, I stumbled upon Automattic job offer.
They were hiring in JAVASCRIPT!
Not only in PHP, but also in JavaScript – the technology I became pretty decent in. On top of that, it turned out, that working in Automattic would let me:

  • Work with React, Redux, NPM, node and all the ‘fresh and hip’ JavaScript technologies;
  • Work with amazing engineers from all over the world and be a part of Silicon Valley;
  • Instead of reading articles about what ‘cool kids’ do, I could have an opportunity to join them!
  • I could travel quite a bit, or even live wherever I wanted! Automattic is a distributed company (or, as we put it: location-agnostic) which lets you see the world without taking a day of vacation (which you have unlimited amount);
  • Because of the whole remoteness, I could be in Poland whenever I wanted to, without skipping work. This is important to me, because I have very old grandparents and sometimes they really need help;
  • I was very excited with the product – I loved WordPress!
  • Tim Ferriss’s site is hosted with this company! (along with Time.com, Wall Street Journal, Washington Post and the Guardian, but I find Ferriss more influential 🙂 ),
  • It was never about money, but geo-arbitrage is finally working in my favor;
  • Overall, this really looked like my “Dream Job”. I became determined to get it and to do it right.

Getting there

Well, you probably got pretty annoyed by the long lead-in. But this is my blog, my rules and I can write here whatever I want :).
But here comes the meaty part:

Reading

I was determined to do it right, so I dug up everything I could on Automattic and their hiring process:

IMG_1446

All I’ve read about Automattic hiring process

Polishing the resume

At this point I knew they must be getting a lot of resumes, so I decided to make mine one-page and make every word count. I reviewed it over and over, asked friends to review it and obsessed about it a lot.
Since I did my reading right, I threw in some “nice touches” about my core competence constituting off-the-charts-sandwich making ability and one of my hobbies being barbecue. All true. Putting that in a resume felt good.

The wait.

G0073526-ANIMATION

After sending that resume I waited. And waited. And waited some more, all while questioning myself.

  • Did they get it?
  • Did they read it?
  • Did they reject me?
  • WHO PUTS SANDWICHES AS A COMPETENCE?! Why did I do that?!

Moar wait.

After 1,5 months I needed to do something constructive. So I booked a ticket to “WordCamp Europe” in Seville, where I was sure I’ll find an Automattician. That was the extent of my plan.
I actually met a bunch of them and they turned out to be very cool people. I even “pinged” them to get my resume reviewed and got back home.

Moar wait

Just after WordCamp Europe, a lot of Automatticians went to React Europe where they ran a coding competition for the attendees. They made a mistake of tweeting the URL, so I promptly joined in.
As you can see, I came in second, after “Moarhaus”, who (despite me trying really hard) had a huge advantage over me.
I have no idea who he is. I only have a vague notion as to where his soul may reside.

reurope.png

Actual Hiring Process

Artur, can you please get to the point? This story is becoming longer and more convoluted that “Pirates of the Caribbean IV” plot and we didn’t get to the hiring process description yet!
I hear ya, but to be honest, Pirates of the Caribbean IV plot is just /dev/random…

1. Chat

First, I was invited to a text-based Skype chat. It lasted about an hour and was quite fun. It was way less technical than I expected.

2. ‘Simple’ coding challenge

After the chat I got a coding challenge to solve. It was not in JavaScript.
The instructions were very open – ended, without any deadline and only with vague description of problems to solve. I assume my drive and ability to self-direct my work were also tested.

I later learned that it was designed to take 6-8 hours of my time.
I devoted about 35 to that project making sure it was perfect.
I may have taken it too far.

3. Chat + Challenge feedback

It took 40 minutes.
I am in for a trial! Wohoo!

4. Trial

What can be a best way to make sure you fit in a company? Ask you questions about JavaScript context execution, new ES6 syntax and what would `”potato” + {} ` evaluate to? Brain teasers about roundness of sewage covers?
Turns out, that the best way to see how an employee would perform is to well, employ them.
This is how trial works. I was working on my trial project, communicating with other coworkers just how I would If I was already working there.
You can do trial “after hours”, keeping your previous job. I decided to throw everything at it and take no chances. For me, it felt more risky to approach this opportunity tired, after hours of my usual work than to quit my safe spot at a huge company. I quit my previous position at Samsung and decided to do the trial full time.
I got paid 25$/hr, which was way more than I was actually making before.
The project was similarly open-ended as the previous one, just much, much bigger. I had to research proper technologies, communicate my progress and design my tasks.

The trial took me ~1,5 months.

5. Matt chat

The final stage of the process is a chat with CEO, Matt Mullenweg. It is a unusual opportunity, as he is a “celebrity” in IT world and frequents the Forbes and other such magazines.
The chat itself also isn’t a mere formality – mine lasted 4-5 hours and I felt that Matt wanted to know me at a personal level. He seems to take this hiring thing very seriously. It is great!
Because of his schedule, sometimes you have to wait quite a bit until he finds time. He caught me in a movie theater, but fortunately I had a good excuse to postpone the chat.
I was watching “The Martian”. It was pretty neat.

I started my job 2 days after that. It was my 30th birthday.
Most awesome gift ever!

Grand Meetup

IMG_0150

GM is a yearly event where all employes meet in person. Because our company is completely distributed, we don’t see each other face-to-face. During this one week a year, we get to shake hands, do some awesome activities, party, geek out, eat together, hug, have a meal, have a walk, eat together, try Polish vodka I brought from home and eat some more.

Naturally, being a relentless badger as I am, during my trial I tracked down other Polish Automatticians and pumped them for information when the Grand Meetup may be.
Knowing the date, I tried to expedite my hiring process so I can “make it” to this years GM. 9 days after my “Matt chat” I was on a plane to Salt Lake City to meet the rest of my new coworkers.

It was a whirlwind!

My team is bunch of the coolest, funniest, most awesome people around!

Automattic Benefits

IMG_1864

Working very hard for those benefits from a Whiskey distillery in Bushmills, Northern Ireland

  • You get to work with really awesome people,
  • The product you work on has 100 000 000 (yep, that’s MILIONZ!) users. The stuff you do matters,
  • You work from wherever you want. Seriously,
  • You want WHENever you feel like it. If you have flow, you can work 12 hours, and the next day – you don’t have to do much. It’s up to you (at the beginning, it was hard to me to understand it),
  • No distractions, meetings and corporate b***t to slow you down,
  • You can spend time with your kid when you need to, walk your dog, set you laundry,
  • You get unlimited vacation,
  • They fly you to awesome places to meet your cool coworkers,
  • Friends all over the globe,
  • A lot of other stuff, listed on benefits page 🙂

And that’s me, Cognitive Engineer, Artur Piszek. One of the cool kids.
Who would have thought.

And yes, we’re hiring.

PS: Working in Silicon Valley company was my Bucketlist #26

LearnMinder – Teaching kids how to code

LearnMinder is a SmartPhone app that blocks internet access until a homework / coding challenge is solved.

It is intended to be installed on a child’s smartphone. Parent can set up a topic that the child needs to practice. Every time the child wants to play or browse the Internet, she/he has to first solve a challenge custom tailored to current skill level. When the challenge is solved – child can use the Internet again.

The whole challenge is presented in a narrative that “the Internet is broken” and child needs to fix a bug in the software to use it. In the process, it learns, that all services it enjoys using are created by someone, maintained constantly and it is not magical black box.

Day by day, challenge by challenge the child gets more comfortable in thinking how the websites / services / games are designed and that sometimes it’s actually more fun to create these products than to use them.

Future integrations include

  • Coding lessons
  • Duolingo – foreign language lessons
  • Fintess tracker – training workouts

Current state

This application will be integrated with code.org and released under Open Source license.

I decided to re-write it in React Native to iron out some kinks.

How this app came to be – EUhackathon

In 2015 I had a pleasure to participate in EUhackathon. It was a splendid 2-day hackathon held in Brussels with a theme

Tools to help teach kids digital skills

During this event I created “Interfixer“, which I’m now rebranding as “LearnMinder

During presentations, along with a fully functioning demo, I presented:

And I won!

This was a huge surprise for me, but the Jury decided that my application was best, and as a single participants, I won the 2015 edition of EU Hackathon 🙂 (You can read more here)

I met some AMAZING people (this was such a whirlwind!)

euhackathon252520435

Me with European Commission Vice-President Andrus Ansip

IMG_4438

Me with Esther Wójcicki, Sergey Brinn’s mother-in-law

$4 SmartHome

 

Firenet is a  Siri-controlled SmartHome installation using $4 ESP8266 modules and free Firebase account

 

Download / setup

Installation instruction, screenshots, information and code on GitHub

Features

  • Siri Control
  • Wireless control over $4 ESP8266 modules
  • AC/DC current control
  • RGB LED strip control, Sunrise simulation
  • IFTTT integration
    • Presence sensing
    • Google Calendar intogration
    • Notifications
  • Device shadows (keeping last device state), notification on device disconnection (ex. when power fails)
  • Google / Facebok / Github… etc login and auth
  • Triggers that can start a series of tasks
  • Websocket API
  • REST API
  • React / Firebase web app
  • Runs on a free Google Firebase plan

Some screenshots

 

Devices list Main menu RGB lamp control Composing triggers

This actually was on my dream list for a while and it’s a #184 in my bucketlist