Creo app in designer’s hands
Introduction
Creo is a macOS app pitched as one of the simpler iOS development tools delivering fully native app experience. Once one of my colleagues shared the link to Creo on our Slack, I just couldn’t resist building something to see how it actually works.
A while ago I gained some experience in building iOS apps still in Objective-C, so I felt that the entry threshold is not that high for me. But I’d never written any code line in Swift and my only focus was design.
Anyway, I didn’t want to just play around with another design tool. I set a goal – I wanted to build an app that would work the way I had planned, something that visually fits the apps I design and proves it’s possible to build something sensible and good-looking in Creo.
Let’s do a ‘to-do’
As one of many newbies I decided to start with something simple. Maybe not as simple as “Hello world”, but I wanted to build an app based on tutorial. “To do list- let’s go!” I thought and after 30 mins I had a working app, the ideal copy of the tutorial source project. It convinced me that the methods, properties and elements mostly respond to the architecture that I had known from typical iOS development.
After all this time I caught an idea of building another to-do list, but this time I wanted to have an app that is mine. The app that meets my needs – so it had to be simple, nice-looking and much easy to use.
No design means no app
As I designer I’ve learned that apps are not born in the code, but on paper and in Sketch. So I quickly switched to paper, where I noted the most essential functionalities the app should have.
That was nothing original, though – I planned to build an app that lets me add lists of tasks distinguished by colors, same like in the tutorial. In addition, I wanted to be able to mark the tasks as ‘done’, which wasn’t in the exemplary app. Another wish was to have a “clear” button that removes, on-demand, all of the finished tasks from the list.
As the cherry on the cake I considered having some productivity quotes displayed within empty states. It seemed like a few tweaks that could take additional one or two extra hours of coding. The design itself took me around 2 hours.
You build, you refactor
I do not have much experience in coding. Except for iOS, I touched a little bit of front-end and years ago I was building apps using PHP. I wouldn’t say I was good enough in any of those but. But the feeling was always the same: “The more you get into something, the more complicated it becomes“.
This time it was no different. After another 2 hours, I had my proof of concept that actually looked the same as on the designs. But the interactions still left much to be desired. I came up with some solutions to achieve what I wanted in terms of moves using native behaviors. I produced a lot of boilerplate and duplicated code that I tried to transform into reusable methods. That brought me to code refactoring.
Oh, finally not only my faults!
After a few hours of rewriting and improving the app, I discovered the issues that I didn’t create myself. I added a native behaviour of removing cells from TableView using deleteRows() method, but… it turned out that inserting rows in a native way was not possible at that time. So my lists while removing elements were smoothly animating, but when adding new tasks the UI was hardly reloaded along with an unwanted blinking effect.
To find out if it’s anything on my side, I posted to Community forum. In an hour or two, one of the creators promised me there that they are already working to implement my feature request. This way I found out the support works quickly. No need for StackOverflow, yay! I had several more issues, all of which, however, were addressed and dealt with rapidly with upcoming versions of Creo.
Let’s look under the hood
Creo in the lowest pricing plan offers 14-day trial of Swift Code Export functionality. That isn’t much but I decided to collaborate with a colleague who’s a senior iOS developer at Tooploox. I asked him to to review the code and architecture delivered by Creo to .xcodeproj:
Karol Wieczorek – senior iOS developer:
Creo has an option of automatic export to native iOS project. This way you can add some custom, native code to your app. Unfortunately, the export seems to be in early development stage and it misses some crucial features, among which the most important is exporting the logic of the app. Right now, Creo translates only the views, so you won’t have access to your event handlers, navigation callback or database code. The good news is that exporting the logic will be added soon.
Under the hood, Creo uses Yoga – a cross-platform layout engine developed by Facebook. It is one of the most popular frameworks of such type for iOS, still, it’s not very popular, so I’m a bit afraid of using it in production app. iOS’s AutoLayout is a pretty complicated framework and I’m not sure if Yoga can be as flexible as native engine. I’m not sure how it will work in more advanced cases, like using size classes or integrating with my custom native views.
So as you can see, there is a room for improvement, but overall, I’m positively surprised. I really like the quality of the code generated by Creo. Of course, it is a generated code, so it’s not as readable as the code written by a human, but it has some features I really appreciate. For example, for every window (let’s say it’s called
MyAwesomeWindow) it generates two classes:CREOMyAwesomeWindow, which contains all generated code, and MyAwesomeWindow, which is a class where you can add your custom Swift code, so you can regenerate project without losing your manual changes.
Summing up
- As a Designer with a little coding experience I’ve managed very quickly to bring my own idea into the working app
- Creo delivers a very neat experience of native-oriented controls and behaviours, but if you plan to build something “more fancy”, be aware of limitations that may “punch you in the face”
- Support and Community are active, so you can be sure thatin case you have issues on your way, somebody will help you or take your report into account as soon as possible
- Creo turns out to be a good solution for building demo for a client, MVP or some tool to turn an idea into the app during hackatons. Unfortunately, for now maintaining and evolving the generated project in Swift is not that satisfying
- I’m glad that I’ve managed to build an app that has a custom UI, which doesn’t hurt my eyes and works almost as I planned. This has given me a proof that Creo is not “yet another tool to build useless prototypes”
I’ve shared my project on GitHub as a reference.
🙂🙂 GitHub – pandizajner/doer: to-do list for iOS – built with Creo
If you’re interested in testing or using the app
🙂🙂 Download Doer* from TestFlight
Read also about Apple app clips, new feature for iOS 14.
