0

How to make a software developer happy ?

Leave your comfort zone

To be or not to be (happy), that’s the question. In this article, I expose some thoughts about what could make a software developer happy in his work. I wrote this article with several targeted audience in mind : Junior developers, Senior Techleads and H&R resources.

Continue Reading

1

I have tried Vue.js and I love it

Vue.js Framework

I have tried Vue.js and just love it.

Some weeks ago, I started a new project for which, I have to build an internet website.

Context

After spending really long hours on internet, browsing, collecting every possible testimonials and advices and comparing them to my first impressions, I decided to start with an hybrid / multiple page site.

(if you are interested by the reasons, it will be the subject of another post).

An hybrid /multiple page site is a website where the content is rendered both from server side and client side at the opposition of single page application (SPA) full client side and a classical server side site(PHP..) Since I want to use the power of modern Js Frameworks as double binding, refreshing, Ajax widgets, Es2016, reactive programming and somewhat control which pages needs to be reloaded, I had to make a choice.

The list of choice is somewhat limited if keep only the 5 most popular ones. (yes I am resolutely not a pioneer of the JavaScript Jungle)

The framework selection

I made the following list :

  • Angular 2+ (they are increasing the major version number for each patch 😅)
  • React.js
  • AngularJS
  • Ember. Js
  • Vue.js
  • JQuery (it is a joke)

Selection criteria

I defined some selection criteria besides the popularity :

No code bloat : specifically to JavaScript, the syntax and the missing OOP native programming have been producing many frameworks with dumb syntax without any semantical and often syntaxical meaning. To overcome the limitations, many frameworks are using syntax sugar, making them a nightmare to memorize. The most ridiculous is the attempt to stick on these syntaxical blobs, some pseudo theorical terms.

A good framework should offer different levels of usages from the straightforward approach to build quickly and easily a website with the common use cases to the low-level approach where the experimented developer is able to tune the required details. What has been done in Laravel, Spring framework or Symphony are good samples.

Symphony framework is known as a huge galaxy. Many components, industry quality grade, but an overwhelming complexity if you start head on.

Therefore they have created a micro — framework called Silex to bootstrap an PHP application without the nasty details and it is deadly simple. If you want more complex things, the components behind Silex are the Symphony ones.

For a web framework, always study how do they handle forms. Especially a basic post form. It takes five minutes in plain HTML to build an (unsecured) form. How long does it take with this framework?

The same thing works for **Spring* and Spring boot.

The framework must have a business friendly licence. No doubt, no legal restriction for the future company. (by the way do you know you cannot build weapons software in Java, please stick to the line…)

An extensible / plug-ins architecture. I believe the success of a framework resides in the possibility to enable the necessary functionalities (aka feature toggling) during your project. Authentication, reactive programming, lazy loading, modularity.

The evaluation (aka trolling section)

Based on these selection criteria, here is my evaluation.

Disclaimer: I have a highly respect for the guys who wrote these frameworks and I do not doubt of their outstanding skills. AngularJS

I have experienced projects with AngularJS and I renounced since it is a deprecated technology. Too much code bloat, slow (I should rather say hard-to-tune) and all efforts are concentrated on the new Angular framework. Also, I think I could have a problem with my use case and disabling the AngularJS router.

Angular 2

Angular 2: I have received a training in January and wrote several prototypes since. I have been a huge fan of typescript, angular-cli. I was happy and thinking, they took the best ideas from the other frameworks and build a big melting pot.

Angular : melting pot

In Angular, you will find web components, uses template a la React.js, you have opt-in double binding, directives, modular architecture, lazy loading and so on and so on. But I progressively hate Angular for many details, slowing me down in my developments.

I really dislike their API and concepts to build forms. You have two choices, a template form design and programmatic form design. The first one is almost useless and the second one is deadly cumbersome.

In Angular, they decided to kill HTML and recreate it. How? Case-sensitive attributes and non HTML attributes. You cannot use your normal code editor on it. Beautifier tools not works or partially works. And worse of all, they conceive this awful syntax based on brackets, parens, Well, I think their are huge practitioners of the Brainfuck language.

Brainfuck language

Brainfuck language

The last issue I encountered is with their wish to produce an industrial, scalable (in the sense if I put more developers on my project, I maintain a stable learning and complexity curve). Yes, they provide dependency injection, IOC. But it really increases the learning curve.

 React.js

I really wanted to start with React.js. As far I have studied it, the framework seems full of promises, with some nice pluggable functionalities.

However at the time I began to use it, I received a lot of news. The concern is about the React.js license, the Facebook license (link1, link2, link3).

Since there is a threat for the future business (everything can be considered as a social network after all), I have rejected it.

 Ember.js

I have never tried Ember.js. Based in my readings, the framework is definitely worth of attention to build SPA applications but not for my use case. Note : during the writing of this post, I felt on that link, confirming that maybe I was wrong about ember.js

Vue.js

On Twitter, I am receiving a lot of feedback from happy users of Vue.js and I decided to give a try.

The syntax seems deadly simple.

Here is the brief of my experience :

I did not use vue-cli, I had to create my own packaging to adapt Vue.js to multipage architecture.

Code bloat: the Vue.js framework is really simple and the documentation quite good. The documentation for the plug-in vue-loader is quite good but I really hate the webpack syntax to enable it (rant..)

Learning curve: I did not try the most hard-core functionalities of Vue.js, though I am using vue-loader, a different template renderer (pug), transitions, a little bit components and lazy loading.

My biggest difficulty have been to maintain my js bundle as low as possible by producing chunks.

The second issue has been to understand why creating a view was creating an App and my component below using the render() function. However I think that Vue.js is easier than Angular. 2.

As in the previous example, the syntax is quite straightforward, no need to learn complex concepts to begin with.

The framework is also compatible with Typescript and the logic behind is quite simple.

Vue.js can be extended with several plug-ins and functionalities. I did not try all of them and the fact you are enabling them manually is comforting me in my approach.

Vue.js is not enforcing a particular programming paradigm(IOC, interfaces, Reactive programming, or. RxJS).

The only reproach I could formulate is a little fear about the Vue.js ecosystem. Please integrate existing libraries rather trying to recreate or mimic ReactJS libraries.

In conclusion, both of these frameworks are legitimate and have their lot of practitioners, and I don’t blame it. Vue.js has been my choice and I do not regret it, yet, since it has made my project easy, fun and effective.

I will try to provide more feedback in the following weeks especially on form editing, unkt testing and E2E testing.

Thanks for your attention

1

The disappointing quest for an Headless CMS in 2017

In 2017, this blog is powered by Hexo.js. However I am looking for a replacement since Hexo.JS is lacking of crucial features.

Introduction

TLDR : HexoJS is too limited, I want online post edition!

I have been recently working to replace the technology powering my blog. A major point is that I am disappointed with its theme. I would like to replace it, with a new technology Vue.JS, for which I have already discussed there.

Since I am replacing the whole front-end, I have been using the great plugin hexo-generator-json. However I still have major issues with my assets (stored with the posts) and it is not really compatible with a CDN solution.

The second feature I am missing, is the possibility to edit my post online. I am an user of Medium and I love the mobile application to create and edits my posts as well watching statistics. A thing I did not think at first, is the impossibility to create new posts with Hexo.JS without an computer. Indeed, to generate your site, you have to generate it, using a full Node.JS environment, commiting, pushing on GITHub your modifications, deploy the docker container and so on. A lot of tasks I have mostly automated but yet, I don’t have a CI Environment available for it.

I did not want to switch back to Drupal and WordPress, equals for me as a bloated solution, slow and hard to tune. I wanted a compromise : why not having a NoSQL Database, a light REST backend, an AdminUI and that’s all. At the beginning of this blog, it was my plan to build this backend, but I decided shortly to concentrate on the content, rather than on the code.

Fortunately, the technologies have evolved and I made a list of Headless CMS / API-First CMD and tested them.

Headless CMS, what is it ?

Headless CMS

Headless CMS

I won’t spend too much time in the details, a good description has been done there.

Basically, legacy / traditional CMS are highly coupled solutions where the following components are tied :

  • Database : SQL Databases
  • Backend : PHP or worse
  • Front-End : Templated front end or theme highly coupled with the backend API. Unmodifiable at best, throwable at worst.
  • Separated WS / RPC : External service to access the backend data, not used by the front-end.
  • Admin UI : Bundled Admin UI.

Usually this kind of CMS are stored in one big block called WordPress, Drupal, Joomla and so on.

The good news is that even these famous solutions are evolving to apply the following modern and well-known principles :

  1. Decoupled front-end : CMS frontends should be decoupled. The UI will access to the blog data and content using an REST API. UI for Headless CMS are usually using technologies as Angular, React or Vue.JS
  2. Responsive front-end : Headless CMS enales the possibility to create various UI depending of your devices, smart watch, website, search engine etc.
  3. NoSQL Database : Handling documents and content is the speciality of NoSQL databases allowing to add your own custom fields, categories and organization.
  4. Framework : Such Headless CMS should provide libraries or framework to access to the content and handling the security as NPM modules and so on.
  5. DevOps : Such solution should be dockerized.

 My expectations

I am expecting from an Headless CMS to contains :

  • a REST backend
  • Documented RESTFul Apis
  • a database driver compatible NoSQL
  • a bundled Admin UI accessing by an API to the REST Backend
  • a docker image or docker compose
  • possibility to add custom fields
  • possibility to handle markdown format for the edition
  • Cloud FS Storage for my medias
  • Optimized solution : I don’t want a new wordpress installation
  • Node.JS solution : I want a lightweight solution
  • Self hosted solution : I want to deploy it on Google Cloud.

 Results

The list of experiments and my opinion about it.

Directus : No!

Docker-compose was not running (I used this project). The docker instructions worked for me.

I launched it and soon enough I received a lot of technical alerts wasting my pleasure of a fresh installation.

Directus / Error message

Directus / Error message

My last blocking point, and the reason I have rejected : I did not find any way to create a content category (called table) in the admin UI. Seems to manipulate the SQL Database to create them : no thanks (rant here).

 GetMesh : Meh

Uh Uh, a Java solution to power a small blog : no thanks.

GetMesh

 Drupal and WordPress : Hydra CMS

Too big, too well-known. The REST API is for sure the next security hole of these solutions.

But the reason of my reject, the UI cannot be separated from the backend!! And why would I like a UI embedded in my backend when I want to create a SPA WebSite ?

I will use them when they will have deleted their UI from the installer.

I suggest to call them HydraCMS.

GraphCMS : Hipster$$CMS

GraphCMS

GraphCMS

Looks Great but I want my own self-hosted solution and don’t want to pay for that.

Site here

Ghost : GirlyCMS

Honestly, I had a crush with Ghost. Sexy, a great installer, a great documentation, everything to tempt me like an attractive woman.

The problem is that Ghost has almost everything to charm me but he has an embedded UI!!!

I don’t want an UI, I want to build mine 🙁

Apart from that point, GhostCMS is really great.

Ghost CMS

Ghost CMS

It even has an Slack integration and loves Markdown!!

Ghost CMS Site

Cockpit : Blind CMS

Cockpit CMS

Cockpit CMS

Listed in the Awesome CMS List, Cockpit CMS is a rather small solution.

The good points are :

** Docker is working fine. ** The concepts and architecture are OK. ** Nice AdminUI, I really appreciated the way to create my collections

But what really disappointed me was :

** No documentation (REST and so on). For an developer it’s unusable ** PHP : There is no documentation and the REST API is coded in PHP.. Meh ** Lonesome developer yes he is brave, we should encourage him, but he is freaking alone.

In summary, I think that this project goes in the right direction but took some tough and spiky path. PHP is clearly not the appropriate language for such solution. Compared to an Express server, the amount of work to be delivered is too high. It really needs more contributors (actives) to create a good solution and fill the big documentation blackhole. I cannot help since I don’t want to code again in PHP but the solution could be great.

Site is here

 KeyStoneJS

Well at the first glance, I rejected, could not find any Docker image. Or the few ones were not working. But my first attempt was dumb. KeystoneJS is not an Headless CMS by itself it’s rather an implementation of a CMS, fully customizable to create your own blog!

Powered by Express and Node.JS, two technologies I am particularly fond of!

The site is there

The positive sides of KeyNodeJS :

  • A slick project creator using Yeoman!
  • Modern technologies, I think the best to create a CMS
  • The bundle is containing what I am expecting (AdminUI, REST Backend, NoSQL Database(mongoDB))
  • Fully customizable collections and so on

The negative points are :

  • Maybe too much code to begin with
  • What is the maturity of the base implementation ?
  • How much effort requested to build its own website ?
  • I think I did not find yet a NPM module to build a REST Client

Conclusion

I have rejected most of these solutions.

  • I tried two times an installation and to migrate my data in DirectUS but I gave up. I don’t believe in the concepts.
  • The lack of API Documentation in Cockpit (HTML or a la Swagger) is blocking my attempt to use it and migrate my data. The fact that the solution is developed in PHP is blocking my wish to support them. And I don’t like much PHP REST Backend to be honest.
  • I really love Ghost but I don’t want their UI, I want mine. Otherwise I would have use it.
  • I tried to use Drupal and WordPress, but the requested system resources + the fact I cannot disable the UI are a big NO for me.

The consequence is that I am using KeystoneJS and I hope I won’t have too much work to power a new version of my blog.

Stay tune!

References :

**