Boilerplates for prototypes

Boilerplates for prototypes

A good start is half the battle..

Such or similar statements also apply to the development of web applications. Anyone who starts with the right tools, in a suitable environment and with a solid foundation, may later not have to tediously restructure the app. Design patterns and best practices in general are often taken very seriously in boilerplates, giving the developer clear guidelines.

With this mindset I have looked at the “Ultimate Boilerplate for Products” Pup from cleverbeagle.com. This is a template for the development of a web application based on Meteor, React, MongoDB and GraphQL. Subsequently I want to answer the question to what extent boilerplates help us with the development of prototypes and when they may actually hinder us.

What does Clever Beagle’s Tool Pup have to offer?

With the installation of Pup (currently in version v2.0.1) you get the executable source code of a small web application for managing Markdown documents. The app contains components to realize the following tasks:

  • User registration via OAuth and user administration via an admin panel
  • Sending e-mails based on HTML and text templates
  • Automatic generation and indexing of a random database set
  • Table definitions via GraphQL and an own GraphQL Playground
  • Create a sitemap and SEO metadata with app details
  • Routing setup for public and authenticated requests
  • Server side rendering (SSR) for faster presentation in the browser
  • Form validation
  • Styling and customization via bootstrap and styled-components
  • Browser policies for protection against XSS
  • Data export, account deletion and declaration of consent according to GDPR / DSGVO
  • Local git repository with an own Linter Script Hooks
  • Unit and end-to-end (E2E) tests
  • Configuration for Development / Staging / Production Settings
  • Complete workflow for app releases and continuous integration including DNS entries, SSL certificates and hosting on Meteor Galaxy (Requires additional access data)

This list is constantly being expanded, as Pup always strives to relieve the developers even more and cover more areas through this boilerplate.

Continue reading

Gatsby: Static Website, super optimized

Gatsby: Static Website, super optimized

For many websites a static site is absolutely sufficient. They offer a number of advantages: Undemanding hosting, secure against malicious content changes, short loading times. Various tools are available to generate these static pages. One of them is Gatsby, which is characterized by the optimization for low latency by creating the website as a so-called progressive web app: The first time you open it, only the required content is loaded to display the page. Further information is then saved in the browser in the background, so that further page changes are possible without waiting time.

Other innovations of the last years are used as well: React as component-based framework for the user interface, GraphQL as query language, Webpack for the bundling. In addition to static files, external sources or CMS can also be used for the content via APIs.

qnipp has built an atlas showing the childcare facilities of the Austrian state Burgenland using Gatsby (Kinderbetreuungsatlas der Arbeiterkammer Burgenland). He showed at the Linuxwuochen in Eisenstadt and Vienna the possibilities and shared his experiences.

The presentation is available for Download. This is the video in German language:

Der Inhalt ist nicht verfügbar.
Bitte erlaube Cookies, indem du auf Übernehmen im Banner klickst.

React Native: JavaScript on the smartphone on the fast lane

React Native: JavaScript on the smartphone on the fast lane

App development divides the developers into three groups: The iOS developers, the Android developers and the group of developers, who try their best using Apache Cordova (former PhoneGap). The first two groups concentrate on own mobile OS, the third tries to build platform-independent apps. The latter one leads to disadvantages, as only a browser component is used.

React Native – an Open Source framework created by Facebook – tries to combine the advantages of both worlds: Instead of different languages only one is used, but the created programs use native UI components and do not have to hide behind the native app in terms of performance.

Franz Knipp showed at the Linuxwochen in Eisenstadt the first steps to create such an app und spoke about his experiences.

The presentation is available on Prezi. The video is in German:

Der Inhalt ist nicht verfügbar.
Bitte erlaube Cookies, indem du auf Übernehmen im Banner klickst.

We’ve created our first CSR report

We’ve created our first CSR report

How would an economy look like, where the primary objective of economic activity is not the money, but the common good?

Following this questions I created my first common good bilance for my company qnipp – not alone, we’ve been a group of four entrepreneurs, who discussed the topics of the economy for the common good.  We rated our companies in the fields of human dignity, solidarity, environmental sustainability, social justice, democratic participation and transparency. We thought of the supply chain, the funders, the staff, the customers and the social environment.

Score

Finally, a score is determined using a matrix, which is evaluated by an external auditor, who creates an official certificate. You can find an English translation of the matrix here.

 

2016_testat_peer_qnipp_web

So, I reached 483 of 1.000 points. For me, the score is not as important as the confrontation with the theme and the detection of fields for improvement.

The bilance

 

Gemeinwohl-Bilanz qnippThe Common Good Bilance (available in German) gives a deep insight into the company qnipp as well as into my role as founder and CEO. It is our first step towards Corporate Social Responsibility.

 

If you want to find out more about the economy for the common good, visit the website www.ecogood.org, which is also available in English.

Meteor success story: Teams & Scores

Meteor success story: Teams & Scores

A few weeks ago we delivered the Meteor application Teams & Scores to the Regional association of sport clubs for target shooting in Burgenland.

The main target of the application was to provide an easy way to collect the results of competitions. Flexibility was a core quality, as the score calculation is different from discipline to discipline in target shooting. So, the application can be used for other sport activities as well.

It includes the management of the associated clubs and their members. The permission model is based on the email address of the members and allows the editing depending on their role, e.g. the director of a club may create and edit club members, a club member may edit his own entry, etc.

The application was built immediately after the release of Meteor 1.3. I tried to implement it according the fresh Meteor guide, so I could provide feedback and pull requests to improve the guide. The developer experience using Meteor was as fruitful as expected. The upgrade to the new version brought several changes, the new application is completely based on JavaScript modules and ES6. It uses Blaze for templating and the Flow Router. The Meteor guide was a good source of inspiration, as well as Exploring ES6 written by Dr. Axel Rauschmayer.

The customer is very happy with the new application, is it offers an up-to-date user experience for the competition directors, who enters the results, as well as for the users, who want to look up their scores and standing.

The next step is the implementation of team-based championships.

The application is available at http://bsslv.meteor.qnipp.com

Meteor packages: Cleaning the package cache

Meteor packages: Cleaning the package cache

Meteor downloads all the packages in the user directory in ~/.meteor/packages. There is no command to clean up this directory, as Meteor doesn’t know the dependencies of all the applications on your computer.

As my partition is always too small, I just wrote a one-liner to solve this problem:

cd ~/.meteor/packages; for i in * ; do pushd $i > /dev/null; ls | sort -V | head -n-1 | while read v ; do rm -rf $v .$v* ; done ; popd ; done

This will delete all but the newest version of every package. If an application needs an older version, it will be downloaded and re-installed by the next start of this application.

It saved me 2.5 GB today. The script works very well in Linux, it should work on Mac OS X as well.

If you delete the link to the meteor command line tool by mistake (it happened to me in the first version of the line above, which contained a bug), you can use the following command to recreate it from the newest version available:

cd ~/.meteor/packages; ln -sf `ls -d packages/meteor-tool/* | sort -Vr | head -n1`/mt-os.linux.x86_64/meteor .

Use all the commands with caution and at your own risk.

Meteor boilerplates: an actual overview

Meteor boilerplates: an actual overview

You want to start a new Meteor project? Instead of starting from scratch with an empty directory and no packages, you could take an existing boilerplate. There’s no official boilerplate, but a number of them are provided by the community.

Meteor boilerplates

The list contains at least the link to the respective Github page. I haven’t tested them, as I created the list as starting point to find a suitable boilerplate for my next Meteor project.

Author Latest Commit Language Router Template Design SEO Autoform Table View User and roles administration CLI
Meteoris 11.11.2015 JavaScript Flow Blaze Bootstrap meteoris:grid-view
matteodem 24.09.2015 JavaScript Iron Blaze Semantic UI ms-seo orion
Differential 04.09.2015 JavaScript Iron Blaze Bootstrap blaze-meta
Differential 02.09.2015 JavaScript Iron Blaze Materialize blaze-meta
patrickocoffeyo 21.10.2015 JavaScript Iron Blaze
yogiben (MeteorFactory) 15.01.2016 CoffeeScript Iron Blaze Bootstrap ms-seo
webtempest 04.09.2015 CoffeeScript Flow Blaze Bootstrap
AdamBrodzinski 25.09.2015 JSX Flow React
joerobmunoz 23.12.2015 JavaScript Flow Blaze Materialize
cowFipps 27.11.2015 JavaScript Iron Blaze Materialize

And what else?

Generators

The boilerplate by @matteodem contains the command line utility orion to generate the folder structure for the application.

iron-cli is a scaffolding tool for Meteor, which generates the directory structure for Blaze templates, collections, routers, etc. (Tutorial)

Yeoman is a tool for all kinds of web applications, and Google finds various generators for Meteor applications, e.g. for Angular (very active project) and React.

Meteor Kitchen

A different approach ist taken by Meteor Kitchen. The complete application including views, models, navigation structure is generated by a single configuration file. Unfortunately, the project is not published as open source (yet).

My opinion

I’m still choosing the starting point. Let me know your opinion by commenting on this post.