Hackday React Native for Android

When React Native for Android came out I was excited to investigate it more at one of Liips monthly innovation days. Liip already developed a React Native app for iOS and we wanted to know how it works for Android. We were: Andrey, Germain, Lukasz and me. Germain is currently working on a cross platform app written with Xamarin.

For this hackday we tried to port an existing React Native iOS app to Android.

TL;DR: We are waiting for WebViews to be supported. See the pull request for changes. We didn’t need to dive deep into Android APIs like XML Layouts for views.

How code sharing works 

React Native has a “packer” which is responsible for collecting and loading all javascript files and resources. To avoid explicitly checking for the current platforms using if/else blocks, the packer ignores all files which end in .android.js on iOS and all files ending in  .ios.js  on Android. The way to develop platform specific components is: First divide the app into small components, each component in its own file. Then implement a platform specific version of a component that works differently.

guess-androidFor example we have a ProgressCircle component which displays a progress in a circle. On iOS we implemented this using React ART but at the moment there is no support for Android. Fortunately we found a package which provided what we needed to get it to work on Anroid. So now have next to the existing  ProgessCircle.js file a new  ProgressCircle.android.js  file. We didn’t have to change the existing code.

An idea was to use inheritance with ES6 classes to not redefine properties etc. We didn’t explore this idea further yet.

What we needed to change

Guess the Liiper on Android – NavigationFor navigating between screens on Android we introduced the Navigator component. We used the existing route definition we used for the iOS navigator and fed it into the Navigator component. That went quite well, only a few lines of code were needed to make the navigation work on Android. Binding the back button we stole from the HackerNews React Native app. On iOS we still use the NavigatorIOS to keep the native look and feel.

Since we used the ActivityIndicatorIOS directly which only works on iOS, we had to create a new component “LoadingIndicator” which uses a ProgressBarAndroid on Android and the ActivityIndicatorIOS on iOS.

Like described above we also needed to add an implementation for the ProgressCircle component on Android.

What is not working

Our main issue was that WebViews are not yet supported on Android. We currently use WebViews for authentication on a website. Unless we find another solution to do this, we will wait for Facebook’s implementation which should arrive soon.

Another topic worth to mention is the app states lifecycle. During our tests we couldn’t find a way to interact with these events on android, although it exists for iOS. Hopefully Android will come along in a coming release.

Translations (new feature added to our app)

To test out a feature which was not easy to implement with Xamarin, we looked at translations. For that we found a package which works on Android and iOS. We translated a few buttons as an example and it works well on both platforms. The device language is automatically detected, in the screenshot you see the french version.

All changes are in our pull request.


The idea of React Native is to learn once how to write React components and use this knowledge on different platforms. Knowing the APIs of those platforms becomes less important. For this first effort we didn’t have to dive into Android APIs at all.

React Native for Android has potential, but we are missing some features like WebViews and ART which will come with time. In a few month from now we expect the Android version to have caught up to the iOS version.



Tags: , ,

Machine learning on Google Analytics

Data mining using machine learning (ML) is a field that always fascinated me. You give an learning system millions of collected data, and it outputs back unexpected insights, that can help you focus on what matters, make you drop things that don’t work, clears mystery from your customers behaviors and potentially reorient your company strategy.

It’s compelling, but that makes you imagine the machine is doing the hard job … Of course not, the machine remains stupid, as always. Data mining is a long iterative process that requires a good load of intuition and a deep understanding of machine learning algorithms. However, it remains more accessible and fun than statistics to experiment because of its intrinsic empirical approach – sorry for feeding what’s already being an unfair preconception that favor ML trend over statistics since decades…

I’ve been longing to put in practice my learning in that field with Google Analytics (GA) data. What more can ML offer in addition to the great analysis features Google Analytics provides ? Is it even possible? Suspecting that GA is not designed for that, I started a short experiment to explore this potentiality.

In this article – addressed to GA novices and ML enthusiasts – I will give a basic introduction about the requirements and benefits of ML, and list some constraints with GA.

In a future blog-post, I will share my findings on how to quickly get machine learn-able traffic data, describe the technicalities of the exploration, and provide the minimum to let you do your own experiments.

Looking for a job?

Let’s imagine a web site, like the Liip blog on which you are presently. And a visitor like you, reading this blog-post. Since Liip almost always has some open positions, we want to make sure that if you’re a developer, you won’t switch on your next data mining article before you’ve visited our open positions. If not, then  you might well be a future client and thus interested to know about our service offering and expertise.

ML could help us to create a decision model to predict how much of a developer you are according to your attributes (ex : region, browser, visiting hours).

Our Google Analytics account contains thousand of examples where a visitor ended up visiting our job page, or not. That’s food for an automatic learner!

Continue reading about Machine learning on Google Analytics


Why You Should now Start Developing with Drupal 8

11 Liipers attended the DrupalCon Barcelona in September 2015. We learned a lot about Drupal 8. And heard over and over again: “Start working with Drupal 8 now!”.

But let’s have a look back: The development of Drupal 8 took more than 4 years and for me as a developer it sometimes seems, like no stone was left unturned. Almost everything has changed. Symfony2 walked onto the stage and brought some paradigm shifts in Drupal 8 that may prove to be a challenge for us as developers.

But the good news is that there are so much new features and tools, that make developing enterprise websites so much easier, that I would like to start new projects with Drupal 8 exclusively and never use Drupal 7 again ;-)

At DrupalCon, there were a lot of interesting sessions about exciting features for developers. My personal favourites were the following:

But what about new projects with Drupal 8?

Sure, all these new features sound exciting. But what about building new customer projects with Drupal 8? The answer isn’t that easy.

We at Liip already started to work with Drupal 8 and we can share some experience with other companies out there, who would like to start working with Drupal 8.

New simple CMS project with Drupal 8 will work out of the box!

Simple CMS projects that rely on Drupal 8 Core without the help of too many contrib modules will work out of the box. So many great features like Views, Page Manager and CKEditor are now part of the core. Drupal 8 matured and is now a full featured enterprise content management system capable of building websites based on structured data.

Nevertheless, there is an initial investment you will have to do, because the learning curve of Drupal 8 is quite steep. If you are not familiar with Object Oriented Programming (OOP) and Symfony2, you will have to put some effort to learn the new concepts. But as soon you managed that, your Drupal installations will become easier to deploy and ways better maintainable.

In our first smaller projects, we calculate with a 10-20% additional costs, because of missing knowledge and experience. we also will have to fix some of these early adopter bugs. These costs will be covered mainly by my personal education budget and also by some extra budget Liip AG has reserved for Drupal 8 transition phase.

If you plan to start a new project you should try to go with Drupal 8 if it’s somehow possible. This will protect your investment for the next few years and make sure, that the long term costs (aka maintenance) stay low. You can expect that in the near future all new Drupal websites will be build with Drupal 8. Additionally you can profit from all the new features. Even as an end user you have a much better user experience and a lot of benefits. If you are uncertain, you may contact us. We have a lot of expertise in this field and will figure out together with you if your project will work out with Drupal 8. In the end, it will be up to you to decide which version is implemented.

For new and complex project you will have to calculate quite some extra efforts!

Bigger project often depend on a lot of custom module. For example complex media management (as we had it in Drupal 7) is not ready at all. For every contrib module you have to evaluate and test, if there is a working Drupal 8 version. If there is none, you will probably have to upgrade parts of the module or looking for an alternative.

We calculate with more than 50% additional costs, if we have to upgrade complex contrib modules or parts of it. As we would like to contribute these modules back to the community, this number can grow quickly if you try to implement the new module in a generic reusable way.

Upgrading existing big Drupal 7 project To Drupal 8: Stay away!

At the time of writing I consider it absolutely senseless to upgrade big projects to Drupal 8 that rely on a lot of contrib modules. You would have to upgrade a lot of contrib modules and also completely rewrite your custom modules. Updating a contrib module means, that you have to understand the code someone else has written and transform it into working module on Drupal 8 (where you probably are not as experienced) and in the same time discover and use the new system / APIs / services. Quite a brave mission that probably will end up in a mess. You should try to avoid that.

So what should I do now?

Every Drupal site is different and especially the customer needs are different and have to be considered on a case by case basis. You will certainly have to calculate with additional internal costs that you cannot bill to your customer in your first Drupal 8 project.

But you should definitely now start working and building websites with Drupal 8. You will enjoy all the new features and make your customer happy with a fast, testable and user friendly system. And we hope, that you also contribute and help upgrading key modules. This helps the Drupal community a lot and will enable all of us to do more complex Drupal 8 projects in the near future.


Report from the HTTP caching tutorial tour

Tutorial at BGPHP In the last month, i was invited to do my HTTP caching with Varnish tutorial twice. I was at the PHP summer camp in Rovinj, Croatia and at the first edition of the Bulgarian PHP conference BGPHP. Both where great conference experiences. Prior this year, I did a similar tutorial at PHP Benelux in Antwerp and DPC in Amsterdam. I would be open to give the tutorial for companies too – if you are interested please contact me.

Continue reading about Report from the HTTP caching tutorial tour

Search: Get past English with Solr

Implementing a great search feature for an English website is already quite a task. When you add accented characters like you have in French, things tend to get messy. What about more exotic languages like Japanese and Chinese?

When we tried to implement a search engine for a multi lingual website where we had articles in Chinese, Japanese and Korean, despite not knowing those languages at all, we quickly remarked that our search engine was performing really poorly. On some occasion it wasn’t even returning an article we specifically copied a word from.

We had to do a lot of research to understand what was happening, here is a compilation of what we found along the way in the hope you won’t have to go the same path as us!

Continue reading about Search: Get past English with Solr

Tags: , ,

Discussing ‘open design’ at iadlab15

Andy and I lately got invited to host a ‘lab session’ at the iadlab15 interaction design conference in Bern. We proposed to animate a discussion on a quite abstract topic: open design.

What the true meaning of our topic was, we didn’t know by the time we proposed it. Yet we had a strong feeling that the ‘open’ culture wasn’t as strong in the design scene as it is in the tech scene and wanted to discuss that assumption, openly.

We thus introduced the open design notion with a big question mark: opensource we know since ages, opendata is now proving its value to the world, what about open design?

It turned out the discussions went fantastically well and we got thanked many times for having brought the topic onto the table.

Even more astonishing to us, what we encountered is a generational gap: digital-native creatives showed interest and seem to integrate open practices whereas their elders tended to disregard – if not despise – them.

Continue reading about Discussing ‘open design’ at iadlab15

Tags: ,

FutureJS ’15

Full Stack Fest

Last week some Liipers and I were in Barcelona for Full Stack Fest, 5 days of Ruby and JavaScript talks, workshops and hackathons. I personally only attended the second part, FutureJS, and this is going to be today’s topic.

Progressive enhancement FTW

The first talk I’d like to share was everything but disappointing. I already saw Rachel Andrew last year at the Front-end Conference in Zürich — an impressive talk about the CSS Grid Layout — and so I was eager to listen to her again. This time the topic was “The business of front-end development” and covered various themes related to her current work and experience.

So what is front-end development? As she said, it used to be mostly being a browser bugs expert. But as they become more and more focused on standards and keep updating frequently — and even automatically — we can finally focus on the most important: creating a good user experience.

The problem is, we tend to be lazy and installing frameworks and libraries without even thinking about the drawbacks is becoming the standard. As Rachel said, we are for sure gaining time on our sides, making our processes quicker but is it worth it? It might cause accessibility issues or even increase the site loading time and you should probably care about this.

Projects are all different, put your usual tools aside when they don’t fit. Think about your visitors’ browser, the country they live in and the usual network connection they have. Focus on the core experience and then — and only then — make it shine.

The slides are available on Speaker Deck.

Web security is hard

The second talk that particularly caught my attention was the one from Alex Sexton about “Hacking Front-end Apps”. I knew security on the web was hard, but I really got impressed by his examples of possible hacks.

As he told us, we all have a friend named <script>alert('Hacked')</script> somewhere in our database but that’s just the tip of the iceberg. All the libraries you hot-link from CDNs, the JSONP requests you do, all these flaws could potentially result in external code being executed on your site.

“You cannot detect malicious code”; I totally approve this assertion, myself having been hacked in the past. The upcoming solution therefore totally makes sense: block everything by default and then white-list only what you trust.

“Content Security Policy”, a W3C Candidate Recommendation, is a standard HTTP header designed to allow websites to declare approved sources of content that browsers are allowed to load into the current page.

CSP will disable inline JavaScript and CSS, eval() and any cross-domain resources including images and fonts by default. It even offers the possibility to report violation to your the URL of your choice. Ain’t that great?

All you have to do then is to define a white-list of resources you want the browser to load. The support is pretty good and you can read more about it on content-security-policy.com.

Discover a bunch of the most weird front-end hacks in the slides.

But that’s not all…

The interactive presentation of Ben Foxall about browser capabilities was fun. Listening to Tom Dale talking about the process behind Glimmer, Ember’s rendering engine, was interesting. Also watching James Halliday creating a Twitter-like messaging system based on P2P was pretty impressive. And finally, hearing Mikeal Rogers saying that Node and IO will be together again to release Node 4 under the Node Foundation was reassuring.

This edition of FutureJS was great; especially the venue and the party at the beach. The biggest disappointment was probably the Wi-Fi who was actually worse than the one from the hotel. If anyone from the organizers is reading this, please do something for next year! Full Stack Fest will takes place again for sure but the dates aren’t known yet, check the line-up once its released!

Tags: , , ,

Let’s celebrate our new Lausanne office!

After 4 years and a growth from 3 to 20 people, our beloved offices in Rue de Bourg 11 were really getting small. We were lucky to find another awesome place downtown : we moved into a two-level office totalizing 800 square meters at Rue Etraz 4, which should leave us enough space to quietly continue growing without worrying about space for a while.

As you know (and maybe can remember our last party on June 10th 2011 in Lausanne), each move comes with its housewarming party and we would be thrilled to have you with us to celebrate! It will happen on

Thursday 17th September 2015 – starting at 4PM

A nice programme has been put together to entertain you until late in the night. Carlos (UEFA) and Daniel (FREITAG) will share their innovative web visions with us. You’ll enjoy great food (Veganopolis and La Ferme Vaudoise) and drinks (including the famous Liip Mojito) while listening to the music of the band Les Marcheurs as well as DJs Mandrax and SL.

All Liip friends, partners and of course our beloved clients are welcome to join with their family (there will even be a kids corner on the site).

Just a small request : it would be nice to inform us of your presence by filling up the form as it will help our organizing team.

Liip Lausanne Office

Writing iOS Layout Constraints The Easy Way

Coming from a web-development background, native iOS development always feels a bit clunky to me when it comes to creating the layouts.

Yes, there is the Interface Builder and it is a great tool, but sometimes,
things get more generic and building the views and layouts can be more efficiently done by hand.

Except – layout constraints! Writing layout constraints can be tedious work.

Example, making an element the half of the width of its parent element in objective-c:

It is not much better in C# with Xamarin either:

But behold! There is our ConstraintHelper!

The ConstraintHelper is a small C# library to help with the layout constraints and it brings less common concepts like Method Chaining to the layout constraints.

ConstraintHelper is Open Source and can be forked from GitHub.

Tags: , , , ,

Liip is over, let’s start at Liip!

Marc Brühwiler, Kim Corminboeuf and me, Matteo De Micheli, finished our apprenticeship successfully this year. Marc and I graduated as application developers at Liip Zurich this summer. Compared to me, Marc did an adult apprenticeship which took just two years instead of four. Kim graduated as commercial employee at Liip Fribourg after 3 years of apprenticeship. We want to share our adventures in form of a little interview.


What was the best part of your apprenticeship at  Liip?


Matteo: I liked the way I was introduced into the professional worklife of a web developer. I started out with little tasks like changing image formats and gradually got into more exciting tasks until being fully integrated in projects.

Marc: I appreciate that I got the perfect amount of freedom. That was important to me, because I was able to schedule my work days a bit differently. Furthermore, I had the possibility to do some things for school at Liip if required.

Kim: I already took interest in the “web-world” before, so it was really interesting to do my apprenticeship here. I learned many things about the development of projects, beside the financial and commercial aspect of the company. Liip is really fair and nice to the apprentices; I was always treated as an employee and not “just” as an apprentice.


How did your supervisor and teammates support you?


Matteo: I liked how Liip tried to integrate me into several projects, so I could experience web development from different sides and roles. There was never a point where I felt helpless, since I could either ask teammates or supervisors for advice.

Marc: I was always able to get help, when needed. I didn’t have to be afraid to ask any Liipers, no matter if it was for school work or projects. Thanks a lot for that!

Kim: I had a lot of help for my school work. I was always able to ask a question when something wasn’t clear and then use that gained knowledge in practice. The employees praised my efforts and I could reassure that it was important what I did.


What was the best / worst experience during your apprenticeship at Liip?


Matteo: My best experience was meeting all the people and them being so open about spreading knowledge. Through pair programming, hackdays and a lot of coding I was able to realize how much can be done when you have the right tools and the Know-How. Even though I always met apprentices my age at school I felt that it gradually became harder for me to stay motivated there. I feel relieved that I can take a little break now from the traditional way of education.

Marc: I’m thankful that right after the confirmation of my successful final exam, I had the freedom to join the team I wanted. Things that are of value to me like what interests I have and where I get the most of joy were all respected. Due to those choices, I as well made up my mind about my future and how I could progress within Liip AG.

Kim: 1 year ago we started a project with all apprentices involved. Our goal was to develop a project that helped new employees to memorize other employees names (like a memory game). I had the role of the PO and Matteo was the Scrum Master. In addition we had Simon Erhardt, Nithuja Nagendram and Mano Speck as developers. It was pretty cool to have a project just with us and it was even cooler that the project was successful! It was also nice to see the apprentices from other offices, even though they work at other locations.


How was your relationship to the supervisors?


Matteo: I had a good relationship with my supervisors throughout the apprenticeship. I liked how I got support at work, as well for school related topics. My opinions were always respected and I never had the feeling that I was treated differently because I’m an apprentice.

Marc: It was really collegial. I could step up to them with whatever the topic was and be sure that I get the right amount of support. Since I had work experience from my apprenticeship as a carpenter I was more comfortable with work life and that probably made the relationship more open.

Kim: Really good. I had different supervisors but they always were here to support me and I learned many things. They also promoted me wherever they could, which helped me a lot because I needed that to improve my skills.


We are very happy to stay a part of Liip and want to thank everyone for the great time!