Comparing Flutter and JavaScript frameworks is like comparing apples and oranges. Flutter is a mobile app development framework, while JavaScript frameworks can be used for many different purposes. However, there are some reasons why Flutter may be a better choice than JavaScript frameworks for building mobile applications.

Performance

Flutter uses a different approach to rendering user interfaces than JavaScript frameworks like React Native. Instead of using a bridge to communicate between JavaScript and the native platform, Flutter uses a fast and efficient rendering engine called Skia. This means that Flutter apps can have better performance and smoother animations than JavaScript-based apps.

Hot Reload

Flutter has a unique feature called Hot Reload, which allows developers to see changes they make to the code in real-time without having to restart the app. This can save developers a lot of time and make the development process more efficient. JavaScript-based frameworks like React Native also have a similar feature, but it's not as fast or reliable as Flutter's Hot Reload.

Widgets

Flutter uses a widget-based approach to building user interfaces, which makes it easier to create complex UI layouts and customize the look and feel of an app. In contrast, JavaScript-based frameworks like React Native use a component-based approach, which can be more cumbersome for complex layouts.

Tooling

Flutter has excellent tooling support, including Android Studio, Visual Studio Code, and IntelliJ IDEA. These IDEs have built-in support for Flutter, making it easy to develop, debug, and test Flutter apps. JavaScript-based frameworks also have good tooling support, but the ecosystem is more fragmented, and some tools may not work well together.

Community Support

Flutter is a relatively new framework, but it already has a growing community of developers and contributors. This means that there are plenty of resources available for learning Flutter, including online courses, tutorials, and forums. JavaScript-based frameworks also have a large community, but the sheer number of libraries and frameworks can be overwhelming for beginners.

Conclusion

Both Flutter and JavaScript have their strengths and weaknesses, and the choice of which to use ultimately depends on the specific needs of the project. However, if you're looking to build a high-performance mobile app with a fast development cycle and excellent tooling support, Flutter may be the better choice.

While we are studying Dart, it's important to keep the following facts in mind:

• Everything in Dart is an object and every object is an instance of a class. Yes that's right, that includes: integers, functions and null. All objects, with the exception of null derived from the Object class.
• Dart is strongly typed, yet type annotations are note required due to type inference.
• If null safety is activated, variables can't be null, unless explicitly specified that they may be. Appending a question mark (?) to the end of a variable's type you make it nullable. The opposite can be said if we add an exclamation mark (!), if a variable is null and it shouldn't be, it will throw an exception.
• Dart supports generic types, such as ListObject> (a list of any type of objects).
• Dart allows top level functions such as main() and functions that are attached to a class or object such as instance and static methods. Functions within functions can create nested or local functions.
• Dart lacks the public, private and protected keywords, but uses underscore (_) for reserved identifiers.

Variables

Variables keep track of references in a Dart program. A variable has a name or identifier and a value that it keeps track of. The variable type can be inferred by the variable's value, but it can be explicitly specified.

// Some variable examples
var greet = "Hello Hugo!";

// Specifying its type
String my_variable = "This is my variable";

// A variable can be dynamic, but we can specify the Object class to
// accept any value
Object name = "Hugo Marquez";

Variable Declaration

We can use the var keyword to declare a variable and with dart's type inference, it will automatically determine the variable data type based on its value. The syntax is as follow:

// Variable declaration
<type> <the variable name> = <values>;
var myVar = "A simple string";
String myString = "A simple string";

// Multipe variable declaration
<type> <var1, var2, var3>;
String str1, str2, str3;
int a,b,c;

Const and Final

We use final and const when we want to declare our variables as constants or we do not want to modify its value in the future. The const keyword is used to define compile-time constants.

// Final variables
final firstName = 'Hugo';
final String lastName = "Marquez";

// Const variables
const a = 10;

// Constant value
const uniqueValue = const [];

Default Values

When creating an uninitialized variable of the nullable type, they are created with the null value. Local variables do not need to be initialized when it is declared, but it must have a value before it is used. Top-level and class variables are lazily initialized, thus the initialization code is executed the first time the variable is needed.

// Nullable variable (numeric)
int? counter;
assert(counter == null); // this should assert to true

// If null safety is enabled, we first need to initialize
// the null value of a variable
int counter = 0;

Dart's Semicolon

In Dart, the semicolon is used to finalize or conclude a sentence, this to indicate that a statement has concluded. If it is not used correctly the compiler will throw an exception.

Dart's Keywords

There are 61 reserved keywords in the dart programming language, this keywords are reserved for the compiler and can't be used as a variable's identifier, class or function name. Keywords are case sensitive, so they must be written exactly as defined. This are some of the most common keywords in the dart programming language:

Data Types

Numbers

Numbers are used to keep track of numeric values, in Dart there are two types of numeric data types:

• Integers: where the value is a whole number or a non-fractional value. It provides a 64-bit non-decimal values that ranges from -263 to 263.
• Doubles: a double represents 64-bit information with double precision for floating numbers.

// Integer examples
int a = 10;
int b = 35;

// Double examples
double c = 3.4;
double pi - 3.1416;

Number Properties

Number Methods

Strings

A string is a sequence of characters that are stored on an array. In Dart strings can be declared with either a single or double quotation marks. A Dart string is made up of UTF-16 code units. Strings are immutable, which means they cannot be changeable after they are created.

// String examples
void main() {
  var hello = 'Hello World!';
  var message = "This string was declared with double 
  	quotation marks :)";
   
   var x = 100;
   var y = 30;
   
   // String interpolation, concatenation and printing
   String initial_str = "The sum of ";
   String x_str = "x: ${x} and ";
   String y_str = "y: ${y}";
   String result = "is ${x+y}";
   
   print(initial_str + x_str + y_str + result);
}

String Properties

String Methods

Booleans

The Booleans in Dart represents a true or false and the Boolean keyword is bool. The numeric values of 0 and 1 can't be used to represent true or false.

// Booleans
bool valid_response = true;
bool invalid_response = false;

Lists

In the dart programming language a list is a collection of ordered things and it is comparable to an array. The list's items are separated by a comma inside square brackets []. Lists are divided into two categories:

• Fixed length lists: The length of the list is provided and it is not possible to change its size at runtime.
• Growable lists: It is declared without specifying a size. At runtime it is possible to change it's size

void main() {
  // List is like an array
  var list = [1, 2, 3];
  
  // Fixed length list
  var fixed_list = new List(3);
  fixed_list[0] = 1;
  fixed_list[1] = 2;
  fixed_list[2] = 3;
  print(fixed_list);
  
  // Growable List
  var grow_list = new List();
  grow_list.add(1);
  grow_list.add(2);
  grow_list.add(3);
  print(grow_list);
  
  // The addAll()
  grow_list.addAll([1, 2, 3]);
  
  // The insert(index, value);
  grow_list.insert(2, 4);
  
  // The insertAll(index, iterable_list_of_values)
  grow_list.insertAll(3, [4, 5, 6, 7]);
  
  // The replaceRange(int start, int end, iterable)
  grow_list.replaceRange(1, 3, [5, 6, 7, 8]);
  
  // The remove(value)
  grow_list.remove(1);
  
  // The removeAt(index):
  grow_list.removeAt(2);
  
  // The removeLast()
  grow_list.removeLast();
  
  // The removeRange(int start, int end)
  grow_list.removeRange(0, 3);
  
  // List iteration
  grow_list.forEach((elements) {
    print("${grow_list.indexOf(elements)}: $elements"));
  });
}

List Properties

List Methods

Sets

Sets in Dart are an unordered collection of elements of the same type. It's similar to an array, except it is not ordered. Sets do not allow us to insert duplicate values, thus the values on a set must be unique.

// Sets declaration
// var setName = <type>{};
// Set<type> setName = {};

var firstNames = <String>{'Hugo', 'John', 'Alex'};

// Accessing a set value at index 2
print(firstNames.elementAt(2));

// Finding a set by value
firstNames.contains('Hugo');

// Remove all elements of a set
firstNames.clear();

// Cast set to a list
// List<type> list_name = set_name.toList();
List<String> listFirstNames = firstNames.toList();

Set operations

Sets in the Dart programming language has the following operations:

• Union: It merges the values of two provided sets.
• Intersection: Returns the intersection between sets, all elements shared by both.
• Subtraction: subtracts the elements (setA - setB), members of setB that are not present in setA are subtracted.

Maps

Map types are used to represent a key-value pair, where each key has a value associated with it. Any type of value and key can be used, but a key in a map must be unique. Curly braces are used to defined a map and a comma separates each pair.

// Map literal declaration
var employees = {'name': 'Hugo', 'last_name': 'Marquez', 'branch': 'Software Engineer'};

// Map constructor declaration
var employees = new Map();
employees['name'] = 'Hugo';
employees['last_name'] = 'Marquez';
employees['branch'] = 'Software Engineer';

// The Map.addAll(Map<key, value> other);
Map teachers = {'name': 'John', age: '30'};
teachers.addAll({'dept': 'Math', email:'john@school.org'});

// The Map.remove(object-key);
teachers.remove('age');

// Iterating over a map
// Map.forEach(void f(K key V value));
teachers.forEach((k, v) => print('${k} : ${v}'));

// Clearing a map
teachers.clear();

Map Properties

Enums in Dart

Enumerators are a collection of known values as elements, members, etc. It's defined using the enum keyword and a comma separated list of valid identifiers. It is enclosed by curly braces and the syntax is as follows:

// Enums in dart
// enum <enum_name> {
//   const1,
//   const2,
//   const..n,
// }

enum months {
  Jan,
  Feb,
  March,
  April,
  May,
  June,
  July,
  Aug,
  Sept,
  Oct,
  Nov,
  Dec,
}

Runes

As defined previously, a string is a collection and sequence of characters of UTF-16 code units. Well a Rune is a unique string of Unicode UTF-32 code units, that enables us to express unique syntax. For example, the special character for a ❤️ is identical to the Unicode u2665, where u stands for Unicode and the digits are hexadecimal integers.

// Dart runes are UTF-32 code units
void main() {
  var heart_symb = '\u2665';
  print( heart_symb );
}

Symbols

A symbol in the dart programming language are used to specify an identifier or operator. In Dart the Hash (#) symbol is followed by the name of the identifier to define a Symbol. Symbols are used in dart as a reflection technique in combination with the mirror library.

import 'dart:core';
import 'dart:mirror';

void main() {
  Symbol library = new Symbol('my_lib');
  String name_of_libs = MirrorSystem.getName(library);
}

What's next?

For Part II we will use the above knowledge and continue our journey on the dart programming language with control flow statements, constants, switch-cases, conditional statements and dart functions.

Cheers! 🍻

Resources

Great news! The dart and flutter ecosystem is very well documented and full of examples and tutorials all over the internet. Here is a list, to mention a few, of useful resources:

Dart programming language

Dart is a client-optimized language for fast apps on any platform

Dart

Mastering Flutter: A Beginner’s Guide (Mastering Comput…

Discover and share books you love on Goodreads.

GoodreadsSufyan bin Uzayr

Reflective programming - Wikipedia

Wikimedia Foundation, Inc.Contributors to Wikimedia projects

Dart is a general purpose, open source, object-oriented, type-safe programming language with C-Style syntax created by google in 2011. It is used to create frontend UIs for online and mobile applications. It's influenced by other programming languages such as Java, C# and Javascript. Dart is a client-optimized programming language, where its main purpose is to be used on cross-platform application development using the flutter framework.  

Ok, so in order to understand this definition, we need to break it down by its components. Some of it might me obvious, but for the fun of it, I'll add a basic summery of the definitions and links to Wikipedia articles to whomever might need it.

• Object-Oriented: "It's a programming paradigm based on the concept of object".
• Type-Safe: "Type safety and type soundness are the extent to which a programming language discourages or prevents type errors". In other words, only the operations that can be performed on data in the language, are those allowed by type of data.

Great! let us go deeper on type soundness, as Dart is and has a static type check and runtime check. The first one is used in compilation on the deployment/production phase while the latter is used for the development phase and fast prototyping. Dart also has a dynamic type, where type check ups are run at runtime. Dart also uses type inference, where the type of a variable is defined by its value on its creation.

Sound null safety

In Dart, values cannot be null unless it is specified to be null, data can be nullable or not, but not both. If a variable in dart is set to be non-nullable, that variable will always be non-nullable.

The Compiler

Dart uses a compiler to compile source code to machine code that can be run on an architecture or the dart virtual machine. We will focus on the Dart VM later on, but for now we will list the following architecture where dart can be run.

Where the following definitions are in order:

• JIT: Stands for Just In Time compilation.
• AOT: Stands for Ahead Of Time compilation.
• dart2js: Is the dart to javascript compiler.
• dartdevc: Is the dart development compiler.

Dart phases

Ok, so you might be wondering, What's with all that different compilation stuff going on here? The answer is quite simple, Dart is trying to breach the gap between the developer experience and the customer experience by providing developers with tools such as just in time compilation and hot reloading while in production or deployment using ahead of time compilation.

Just think about it like this:

Dart CLI

The dart CLI is the command line interface tool used for creating, compiling, migrating, installing dependencies and more. There are some common available commands and they are as follow:

Manage your Flutter app development.

Common commands:

  flutter create <output directory>
    Create a new Flutter project in the specified directory.

  flutter run [options]
    Run your Flutter application on an attached device or in an emulator.

Usage: flutter <command> [arguments]

Global options:
-h, --help                  Print this usage information.
-v, --verbose               Noisy logging, including all shell commands
                            executed.
                            If used with "--help", shows hidden options. If used
                            with "flutter doctor", shows additional diagnostic
                            information. (Use "-vv" to force verbose logging in
                            those cases.)
-d, --device-id             Target device id or name (prefixes allowed).
    --version               Reports the version of this tool.
    --suppress-analytics    Suppress analytics reporting when this command runs.

Available commands:

Flutter SDK
  bash-completion   Output command line shell completion setup scripts.
  channel           List or switch Flutter channels.
  config            Configure Flutter settings.
  doctor            Show information about the installed tooling.
  downgrade         Downgrade Flutter to the last active version for the current
                    channel.
  precache          Populate the Flutter tool's cache of binary artifacts.
  upgrade           Upgrade your copy of Flutter.

Project
  analyze           Analyze the project's Dart code.
  assemble          Assemble and build Flutter resources.
  build             Build an executable app or install bundle.
  clean             Delete the build/ and .dart_tool/ directories.
  create            Create a new Flutter project.
  drive             Run integration tests for the project on an attached device
                    or emulator.
  gen-l10n          Generate localizations for the current project.
  pub               Commands for managing Flutter packages.
  run               Run your Flutter app on an attached device.
  test              Run Flutter unit tests for the current project.

Tools & Devices
  attach            Attach to a running app.
  custom-devices    List, reset, add and delete custom devices.
  devices           List all connected devices.
  emulators         List, launch and create emulators.
  install           Install a Flutter app on an attached device.
  logs              Show log output for running Flutter apps.
  screenshot        Take a screenshot from a connected device.
  symbolize         Symbolize a stack trace from an AOT-compiled Flutter app.

Run "flutter help <command>" for more information about a command.
Run "flutter help -v" for verbose help output, including less commonly used
options.

Dart VM

The Dart VM is not a virtual machine like the Java Virtual Machine, in a way, it is all the components that provides an execution environment for a high-level programming language. So too much can be said for the VM but to keep things simple, we can say that the Dart VM includes the following:

• The runtime system.
• The development components such as:
  • debugging tools.
  • hot-reloading.
  • etc.
• JIT compilation pipeline.
• AOT compilation pipeline.

The heap memory uses a garbage collector to reclaim memory allocated but no longer used. The Dart VM can execute the code in 2 ways from source through JIT or AOT and from snapshots which includes JIT, AOT or kernel snapshots.

Thank you for reading my post, this should be enough information for us to start our journey with the Dart and Flutter ecosystem. I hope you find this information useful and sparks the fire to get you started with Dart and flutter. The next series of post will be more in depth and with a more hands-on approach.

Cheers! 🍻

Resources

Dart overview

A short introduction to Dart

Dart

Dart programming language

Dart is a client-optimized language for fast apps on any platform

Dart

DartPad

An online Dart editor with support for console, web, and Flutter apps.

Ruby on Rails is a pretty straightforward framework to get started on, it is easy to understand and learn, but to achieve mastery it requires time, just like any other framework or tool. "Rails do not scale", this is one of the biggest misconception and argument used to downplay the framework. In my opinion bad system design no matter the language or framework will always be slow and hard to scale.

N+1

The N+1 problem is one of the most common anti-patterns that affects performance in a very meaningful way. This happens when a query is executed as a result of the previous query. This issue might not be as obvious when you have a small application or dataset, but if we want to keep our application light and fast we need to remove this anti-pattern.

Here is an example:

class User < ApplicationRecord
  has_many :tweets
end

class Tweet < ApplicationRecord
  belongs_to :user
end

Tweet.all.each do |tweet|
  puts "#{tweet.title} was written by #{tweet.user.username}"
end

This will produce the following queries:

Tweet Load (0.4ms)  SELECT "tweets".* FROM "tweets"
  User Load (0.2ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  User Load (0.2ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  User Load (0.3ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 2], ["LIMIT", 1]]
  User Load (0.2ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 2], ["LIMIT", 1]]
  User Load (0.2ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 2], ["LIMIT", 1]]
  User Load (0.2ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 2], ["LIMIT", 1]]
  

In this example, we first retrieve all the Tweet objects and then for every tweet we retrieve the users. There are 6 tweets in the database, this example executes 7 queries.

Imagine if we have a bigger application,  where there are 15,000 tweets in the database, the application will timeout and hit a database connection limit.

Eager Loading for N+1

There are several ways to implement eager loading on Ruby on Rails, the easiest one is to use the includes method to specify the relationship that needs to be included in the result set.

Let's create a fix for the N+1 with the includes method:

Tweet.includes(:user).each do |post|
  puts "#{tweet.title} was written by #{tweet.user.username}"
end

Tweet Load (103.7ms)  SELECT "tweets".* FROM "tweets"
  User Load (32.1ms)  SELECT "users".* FROM "users" WHERE "users"."id" IN (?, ?, ?, ?, ?)  [["id", 1], ["id", 2]]

With the includes method, now we have a the same output but this time we are executing only 2 queries to load the data into memory. Even if we have 15,000 tweets on the database, this will only execute 2 queries!

How does it work?

What is happening is that Tweet.includes(:user) is querying and retrieving the corresponding user records from the database immediately after the initial request for all tweets.

Using Scopes

Scopes are a powerful feature in Ruby on Rails that allow you to define reusable query fragments. Scopes can help you keep your code DRY (Don't Repeat Yourself) and make it easier to write complex queries.

For example, let's say we want to find all the posts that were created in the last week. We could write a scope like this:

class Tweet < ApplicationRecord
  scope :recent, -> { where("created_at >= ?", 1.week.ago) }
end

# We can then use this scope in our code like this:
@tweets = Tweet.recent

This will return all the posts that were created in the last week. Scopes can be chained together to create more complex queries, like this:

@tweets = Tweet.recent.includes(:comments).order(created_at: :desc)

This will return all the posts that were created in the last week, including their comments, and order them by creation date in descending order.

Use database indexes

Indexes are a way to optimize database queries by creating a data structure that allows the database to quickly find the data that it needs. In Ruby on Rails, you can create indexes by adding a migration that creates an index on a table.

Resources

Active Record Query Interface — Ruby on Rails Guides

Active Record Query InterfaceThis guide covers different ways to retrieve data from the database using Active Record.After reading this guide, you will know: How to find records using a variety of methods and conditions. How to specify the order, retrieved attributes, grouping, and other properties…

Ruby on Rails Guides

includes (ActiveRecord::QueryMethods) - APIdock

APIdock

Welcome to Part II of the modern CMake workflow series. In this post we will create a simple example of a small project which will help us to really grasp the concepts explained on Part I. Also I'll share this small project on a github repository which once cloned it will help you start a new C++ project with all the conventions mentioned in Part I in place.

What are we building?

OK so lets build a short and easy example of a module, something useful and not too complicated for the purpose of this blog post. For this example we will make a simple system module with a Logger which will be a private interface of the spdlog library.

To start building this module we will need the following:

• Create our module directory inside the src folder. The name of the parent folder will be our module's name in this example it will be called system.
• Inside our module's directory we need to create the public header's directory and we will follow Part I naming conventions. So for our example we will use the pn namespace, which stands for project namespace, it will be as follows: include/pn/system/.

Here is an expanded view of the project's tree:

The System Module

We'll build a simple interface to the spdlog logger, we will start with a singleton pattern to build this feature. First we need a public header so other libraries that link to this module may be able to log to the console even though they won't have access to the spdlog library.

#pragma once

/**
 * Notice we didn't include the spdlog library here,
 * it was included in the source file so we can make it a
 * private dependency.
 * 
 * If you include a header of a dependency on a public library header,
 * then that dependency needs to be declared public as well.
 **/

#include <string>

namespace pn {
  class Logger {
    public:
      // Singleton Manager
      static Logger *getInstance()
      {
        if (instance == nullptr) {
          instance = new Logger();
          return instance;
        }
        return instance;
      }
      
      static void setLevel(int level);
      static void debug(std::string msg);
      static void info(std::string msg);
      static void warn(std::string msg);
      static void error(std::string msg);
      static void critical(std::string msg);
    
    private:
      Logger(){ setLevel(1);}
      static Logger *instance;
  };
}

This is a simple header, we defined the Logger class which is a singleton with static methods, every method corresponds to the different types of logs spdlog has and each receives a string parameter as a message.

Now that we have our Logger specification it is time to write the implementation of it:

// Include our public library header
#include <pn/system/Logger.h>

/**
 * Notice we included spdlog here instead of the Logger header, 
 * this is because we want to make it a private dependency
 * 
 **/
#include <spdlog/spdlog.h>
#include "spdlog/sinks/stdout_color_sinks.h"

namespace pn {
  Logger* Logger::instance = 0;

  void Logger::setLevel(int level)
  {
    switch (level) {
      case 1: spdlog::set_level(spdlog::level::debug); break;
      default: spdlog::set_level(spdlog::level::debug); break;
    }
  }

  void Logger::debug(std::string msg) { spdlog::debug(msg);}
  void Logger::info(std::string msg) { spdlog::info(msg);}
  void Logger::warn(std::string msg) { spdlog::warn(msg);}
  void Logger::error(std::string msg) { spdlog::error(msg);}
  void Logger::critical(std::string msg) { spdlog::critical(msg);}
}

The implementation is simple, we just instantiate our Logger object and refer every type of log to the corresponding spdlog function.

The Main Executable

To create our main executable we first need to create a CMakeLists.txt where we will tell the build environment about it, add the subdirectory of the system module and link the main executable with our system library.

# Add modules
add_subdirectory(system)

# Create our main executable
add_executable(main main.cpp)

# Link privately our main executable with our shared libraries
target_link_libraries(main PRIVATE pn-system)

And now the main executable with the main function which just calls each type of logs:

#include "version.h"

// Include system module's logger
#include <pn/system/Logger.h>

int main(int argc, char const *argv[]) {
  pn::Logger::setLevel(1);
  pn::Logger::info(PN_INFO);
  pn::Logger::debug("This is a debug log");
  pn::Logger::warn("Beware of this log!");
  pn::Logger::error("Oops something went wrong!");
  pn::Logger::critical("I'm ded :(");
  return 0;
}

You might have notice the version header, which is just a header with pre-processor functions defining the version and description of the project:

#pragma once
#include <string>

#define PN_VERSION_MAJOR 0
#define PN_VERSION_MINOR 0
#define PN_VERSION_PATCH 1

#define STRINGIFY(x) #x
#define TOSTRING(x) STRINGIFY(x)

#define PN_VERSION "v" TOSTRING(PN_VERSION_MAJOR) "." TOSTRING(PN_VERSION_MINOR) "." TOSTRING(PN_VERSION_PATCH)
#define PN_NAME "Project Name"
#define PN_DESCRIPTION "Project Description"
#define PN_COPYRIGHT "http://hugomarquez.mx \t (C) 2022"

#define PN_INFO "\n" PN_NAME ": " PN_DESCRIPTION "\n" PN_VERSION "\n" PN_COPYRIGHT "\n"

Test-Driven Development

For our testing purposes we need to create a CMakeLists.txt, which its sole concern will be finding the testing framework library, the main testing executable with the linkage of our modules.

# Find required package/framework for testing
# In this case I'll be using Catch2
find_package(Catch2 REQUIRED)

# Create main test executable
add_executable(Test Test.cpp)

# Link with pn-system library
target_link_libraries(Test PRIVATE pn-system)

# Link with Catch2 testing framework
if(Catch2_FOUND)
  message("-- [TEST]: Required library Catch2 found!")
  set(Catch2_test_util "${Catch2_LIB_DIRS}/cmake/Catch2")
  target_link_libraries(Test PRIVATE Catch2::Catch2)
endif(Catch2_FOUND)

include(CTest)
include(${Catch2_test_util}/Catch.cmake)
catch_discover_tests(Test)

And for our test executable we have the following example:

// This tells Catch to provide a main() - only do this in one cpp file
#define CATCH_CONFIG_MAIN
#include <catch2/catch.hpp>

// Here we include our system module's test following the directory naming convention
#include "./pn/system/LoggerTest.h"

Finally lets build our test! This will be very simple because our Logger class only refers the spdlog functions with static methods. So we only need to test that the singleton pattern is not returning a null or empty object.

#include <string>
#include <catch2/catch.hpp>
#include <pn/system/Logger.h>

using namespace pn;

TEST_CASE("pn::Logger", "[System]") {
  
  SECTION("#getInstance()") {

    // Singleton pattern, shouldn't return 0
    REQUIRE(Logger::getInstance() != 0);
  }
}

Putting it all together!

Getting our dependencies

To get our dependencies from conan we navigate to the build folder and run the following command:

$ conan install ../

This will download our dependencies and the modules required to find them using CMake:

Generating and compiling our build files

To generate our build files, which in my case I'll be using makefiles, we need to run the cmake generator inside the build directory:

$ cmake ../

Running the tests

We have several options to run our tests, we can use CTest or just simply running the test executable, I'm going to show both versions of it:

Running our main executable

Finally it is time to run our main executable, when we run it we should see all our logs being displayed on the console:

Thank you for reading my post, it was a long journey but we had fun... right? Either way I really hope you found this helpful and I'll be leaving you with the github repository if you would like to use this as a template for your new C++ projects.

Bottoms up! 🍻

Resources

GitHub - gabime/spdlog: Fast C++ logging library.

Fast C++ logging library. Contribute to gabime/spdlog development by creating an account on GitHub.

GitHubgabime

GitHub - hugomarquez/Modern-CMake-Workflow: Starter template or skeleton for test-driven and modular designed development using CMake and C++

Starter template or skeleton for test-driven and modular designed development using CMake and C++ - GitHub - hugomarquez/Modern-CMake-Workflow: Starter template or skeleton for test-driven and modu...

GitHubhugomarquez

When I was learning a modern approach to CMake, I remember it was difficult! There were a lot of rules and sometimes those rules didn't make any sense unless there was an example of it. Another thing that hinder my learning curve of CMake was the vast amount of open source projects that uses "old" CMake.

To solve this and based on some of the resources I've listed below, I developed a customized version on how to effectively use modern CMake on your C++ projects. Of course it goes without saying this is based on my own experience and things could be subject to change, besides I'm encouraging to make your own changes to this workflow.

In Part I of this post, I'll make a brief introduction to modern CMake, what type of problems it tries to solve and how we can start using it. Then I'll recommend a project structure as a skeleton for new projects as well as some tools for dependencies. Finally some resources I consider fundamental to really understand how to use modern CMake.

As I stated above one of my biggest hinders was the lack of examples, so to be part of the solution in Part II we'll make a small and simple example of a module as a shared library with a testing environment and private dependencies.

What is "Modern CMake"?

CMake is a collection of open source tools that are designed to build, test and package software. It is used to control the compilation process through configuration files that generates native makefiles or workspaces that can be used to compile on the environment of choice. In short, CMake is not a build system, but a collection of tools that generates another system's build files.

CMake is constantly evolving and the most significant additions were released in version 3.0 which is what we called "Modern CMake". Despite this constant evolution and benefits many software engineers and programmers are not using them due to the lack of knowledge or some sort of resistance to modernizing old code base.

To get started with modern CMake you need to update your installation to the latest version of CMake, and add to your CMakeLists.txt the minimum required version to 3.10 or above. Below is a minimal CMakeLists.txt file that you can use as a reference to in your CMake and C++ projects.

cmake_minimum_required(VERSION 3.10.2)

# Set version variables
set(version_major "0")
set(version_minor "0")
set(version_patch "1")

# Set project version
set(project_version "${version_major}.${version_minor}.${version_patch}")

# Set the project and description
project(ProjectName VERSION ${project_version} DESCRIPTION "Project Name" LANGUAGES CXX)

# Set custom cmake modules path
set(CMAKE_MODULE_PATH ${CMAKE_MODULE_PATH} "${CMAKE_SOURCE_DIR}/cmake/")

# Set output paths
set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}/bin)
set(CMAKE_ARCHIVE_OUTPUT_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}/lib)
set(CMAKE_LIBRARY_OUTPUT_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}/lib)

# Use c++11 flag for all modules
add_definitions("-std=c++11")

# Conan setup for dependencies
include(${CMAKE_BINARY_DIR}/conan_paths.cmake)

# Add sources
add_subdirectory(src)

# Testing
# PN stands for project namespace, change accordingly
option(PN_BUILD_TESTS "Determines whether to build tests." ON)
if(PN_BUILD_TESTS)
  enable_testing()
  add_subdirectory(test)
endif(PN_BUILD_TESTS)

Thinking in Modules

For example, imagine you're working on a delivery application similar to Uber Eats, you might have an architecture similar to this:

Where you have your modules separated by domains, in theory you can test and develop in isolation. This kinda looks OK, though we all know this is not going to be maintained and sooner than later we ended up with something like this:

In practice, we ended up mixing and matching our modules, soon the route calculator module will be requiring the prices serializer and the order serializer modules as dependencies and as a result their dependencies and compilation flags. So what do we do? the typical solution is to group those modules.

And more grouping needed in the client's orders and fare modules:

But the problem with this "solution" is that we ended up with a big monolithic code base, with a compilation nightmare where updating or changing one dependency affects modules who don't even directly use that dependency so we ended up declaring every dependency as public 🤢.

If you need a more in depth example, Mathieu Ropert talked about the benefits and patterns that can be used for modular design using CMake in his CppCon 2017. I highly recommend watching Ropert's talk.

So what is the "real" solution then?

I believe a solution to this problem is to force ourselves to a module oriented way of thinking by creating shared libraries whose purpose are very specific to a certain domain. To achieve this with modern CMake we need to use the target specific commands, to learn more about this I recommend Kuba Sejdak's blog post on targets and properties.

Using this approach will allow us test and develop software on isolation and without affecting other modules. Of course there should be a judgment call on whether a certain module should include more or less since there is a limit to what can be tested and developed on isolation.

Project Structure Convention

Now that we have the modular design mindset, it's time to propose a simple structure for our projects, this will help us maintain a modular design mindset and our test driven development. We can start our project tree with the following folders and files:

• Build: This is required by CMake, it is the place where the build files will be created, it might be a Makefile, etc.
• Docs: We should always document our projects, if you use a documentation generator like Doxygen, then this is the place where it should generate the docs.
• Lib: Here we might store 3rd party libraries that were not available through Conan, it can be a git submodule.
• CMakeLists.txt: This is our entry point in the build process, you can start by using our example shown above.
• conanfile.txt: Our Conan file where we declare our dependencies, similar to npm and package.json.

The src directory

The source directory is the place where we put our sources, headers and modules. It should also contain our main entry point via an executable or library. The modules inside this directory should follow a simple convention:

• The module's name is the root folder of that module's directory.
• Every module should include a CMakeLists.txt, where it will be declared as a target library or executable as well as all its dependencies and compilation flags.
• The public headers of a module should reside in the following structure: include/{namespace}/{module's name}/.
• The private headers and sources of a module should reside inside the root directory of that module.
• Always link to a dependency as private unless it is necessary to explicitly make it public.

The test directory

This is where we put or tests, but we need some structure as well. For our test's directory we need to use the following convention:

• Tests for the main executable should be put in the test's root directory.
• Every module's test should use this structure: test/{namespace}/{module's name}/.
• Include the module's test headers in the test executable.

Dependencies and Package Managers

For dependencies and packages management I like to use Conan. With this tool you just specify what package or library you need for your project on a conanfile.txt and Conan will be in charge of downloading the appropriate sources and headers.

To search for the available packages and their versions we need the ConanCenter, which is a repository where people share C/C++ packages. There we can search for a package and choose an appropriate version to use on our projects.

[requires]
spdlog/1.4.2
catch2/2.13.7

[generators]
cmake_paths
cmake_find_package

Conan is more complex than this, but for our purposes this is enough. Also it is worth noting that there are other solutions available like vcpkg and/or just using your default package manager like apt, pacman or yum.

To add a dependency to a module, we need to link that module with the library. Fortunately CMake has modules to help us find those libraries and with Conan this is easier. Next an example based on the upcoming Part II, on how to search and link to a library on CMake:

# Create our shared library and include the sources
add_library(pn-system SHARED 
  Logger.cpp
)

# Dependencies and compilation flags for this library
# Find spdlog
find_package(spdlog REQUIRED)
if(spdlog_FOUND)
  message(STATUS "[SYSTEM][BUILD]: Required library spdlog found!")

  # Link to the spdlog library as a private dependency, this means
  # that if another module links to the pn-system library it 
  # won't be able to access the spdlog library.
  target_link_libraries(pn-system PRIVATE spdlog::spdlog)
endif(spdlog_FOUND)

What's next?

For Part II and the last part of this series, we will use the above knowledge to create a simple module example using modern CMake, private dependencies, naming conventions and a basic structure to start our test-driven development process.

I know all this information may be a little daunting and confusing, hopefully on Part II this makes more sense and leads you to a happy relationship with this amazing tools.

Resources

CMake is complex, but there is hope!

Learning and using CMake can be a daunting task, especially when you can find out in the wild "old" and "modern" CMake that might confuse you, but fortunately for us there are a lot of great resources by people who are really passionate on build systems and CMake. I would like to recommend some awesome resources to get you started with this enterprise.

CMake

CMake

Modern CMake is like inheritance - Kuba Sejdak

CMake has been created in 2000 by Bill Hoffman from Kitware. During the last 20 years, as of the time of this publication, it’s been constantly evolving by adding new features and expanding its support for third-party libraries. But the most significant additions were released in version 3.0 and are…

Kuba SejdakKuba Sejdak

My CppCon 2017 talk about Modular Design with CMake is online! · Mathieu Ropert

Do you think about your libraries in CMake in term of compiler flags or architecture modules? In this talk, I show you how to do the latter.

C++ French User Group (CppFRUG)

An Introduction to Modern CMake · Modern CMake

Henry Schreiner

Effective Modern CMake

Effective Modern CMake. GitHub Gist: instantly share code, notes, and snippets.

Gist262588213843476

Imagine this scenario, you are working on a web development project, maybe they're using "insert trending CSS framework here", and you just want to try out some simple cool new "glitch" effect on the User's profile. So you decided: "Ok, let's spin up a simple  starter page to try out this new feature". You clone a starter repository with everything you need, but wait... do you really need everything? How about we just simply copy-paste a 4Kb file to style.css and start developing that new feature!

CSS Variables

Yes! you can use variables in CSS without using a pre-processor like SASS and LESS. It is very simple and if you want to learn more about them I'd recommend the Mozilla reference guide on CSS variables. For now our variables will be very simple, let's start with our breakpoints.

/* Variables */

:root {
  /* Breakpoints */
  --mobile: 576px;
  --tablet: 768px;
  --desktop: 992px;
  --desktop-lg: 1200px;
}

We also need to configure our grid system, the number of columns, the gutter size (space between columns), types of columns and their minimal widths. For now let's add the columns and the gutter to the root's variables.

/* Variables */

:root {
  /* Breakpoints */
  --mobile: 576px;
  --tablet: 768px;
  --desktop: 992px;
  --desktop-lg: 1200px;
  /* Grid Config */
  --grid-columns: 12;
  --grid-gutter: 15px;
}

Container

The container or sometimes called wrapper is our fundamental block, this is the place where all the rows and columns will live. In our simple implementation, we only need to define the horizontal padding, that is the left and right padding.

.container {
  width: 100%;
  padding-left: var(--grid-gutter);
  padding-right: var(--grid-gutter);
  margin-left: auto;
  margin-right: auto;
}

Responsive Containers

For a more "modern" approach to our containers, we will set our containers to a different maximum width depending on the device's screen minimum width. To achieve this, we need to make use of media queries, which are useful when you want to modify your site depending on a device's specific characteristics such as screen resolution or browser viewport width. You can read more about this on the Mozilla reference guide on media queries.

/* Responsive Containers */

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Rows

The rows will be a bit more complex, it will use the CSS Grid Layout System which is a 2D grid-based layout system. According to CSS Tricks, as of March 2017 all mayor browsers support this CSS feature including Android and IOS.

.row {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-gap: var(--grid-gutter);
  padding-top: .2em;
  padding-bottom: .2em;
}

.row>* {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}

/* Hide something */
.d-none {
  display: none !important;
}

Columns

This bit of our simple grid layout is pretty straightforward although a bit repetitive since we are not using a pre-processor like SASS or LESS. The idea is to define the positioning and padding of our columns then apply through media queries the responsive behavior.

/* -- Columns -- */

.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm,
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md,
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg,
.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl,
.col {
  max-width: 100%;
  position: relative;
  padding-right: var(--grid-gutter);
  padding-left: var(--grid-gutter);
}

Responsive Columns

With our columns defined, now we need to define the behavior depending on the media query. As an example I will write and explain the first types of columns which are the col-sm-* for the small media query.

/* SM */

@media (min-width: 576px) {
  .col-sm-1 {
    grid-column: span 1;
  }
  .col-sm-2 {
    grid-column: span 2;
  }
  .col-sm-3 {
    grid-column: span 3;
  }
  .col-sm-4 {
    grid-column: span 4;
  }
  .col-sm-5 {
    grid-column: span 5;
  }
  .col-sm-6 {
    grid-column: span 6;
  }
  .col-sm-7 {
    grid-column: span 7;
  }
  .col-sm-8 {
    grid-column: span 8;
  }
  .col-sm-9 {
    grid-column: span 9;
  }
  .col-sm-10 {
    grid-column: span 10;
  }
  .col-sm-11 {
    grid-column: span 11;
  }
  .col-sm-12 {
    grid-column: span 12;
  }
}

The idea here is to span the column count by 1 until we get to the 12th column. Now we need to do this to all the types of columns and media queries we're going to use, but for simplicity sake I've already written it down for you!

Example

Just copy-paste the whole thing to a grid.css named file and reference it from your html like this.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vanilla CSS Grid Inspride by bootstrap</title>
  <link rel="stylesheet" href="grid.css">

</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xl-6">One of three columns</div>
      <div class="col-xl-4">One of three columns</div>
      <div class="col">One of three columns</div>
    </div>
    <div class="row">
      <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">One of three columns</div>
      <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">One of three columns</div>
      <div class="col-sm-2 col-md-2 col-lg-2 col-xl-2">One of three columns</div>
    </div>
    <div class="row">
      <div class="col-sm-2 col-md-2 col-lg-2 col-xl-2">One of three columns</div>
      <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">One of three columns</div>
      <div class="col-sm-2 col-md-2 col-lg-2 col-xl-2">One of three columns</div>
    </div>
  </div>
</body>

</html>

And here you can see the grid. (I added a dotted outline so you can see the different blocks of the grid layout)

The whole thing

Conclusion

I'm too lazy to get the extracted grid layout system from bootstrap or to run NPM and install another library, I just wanted a simple solution to test things out quickly and with less of a hassle than the other alternatives. So now, all I have to do is copy paste the file above. Hope you like it! Please tell me if you would like to add something or remove something to it.

Cheers! 🍻

References

A Complete Guide to Grid | CSS-Tricks

Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.

CSS-TricksChris House

Using media queries - CSS: Cascading Style Sheets | MDN

Media queries are useful when you want to modify your site or app depending on a device’s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

MDN

Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e…

MDN

Have you been working on something very important, maybe it's a time critical commit that needs to be pushed ASAP while you are executing a CPU intensive task on the background and suddenly everything freezes and stops working?

Whatever the case it may be, we've all been there and it's not as obvious on how to release our machines from that perpetual state of unresponsiveness. This is a simple guide on how to unfreeze our Linux machines from that state.

Processes, Processes Everywhere!

The most common way of unfreezing your machine is by killing the process or parent process that is giving you trouble. Of course this will discard any unsaved data in that program and programs spawned by it.

I barely have control 😅

Assuming you have control on the machine. If you do, you could try the following:

1. Ctrl+Alt+t to open up a new terminal emulator.
2. On the terminal run ps aux to list all processes on the terminal.
3. Pipe it into a grep command to "search" for the process name.

For example:

$ ps aux | grep chrom
hugomar+    7670  2.5  5.2 17385448 317052 ?     Sl   Mar11  35:18 /opt/google/chrome/chrome --enable-crashpad
hugomar+    7677  0.0  0.0 16798672 2604 ?       Sl   Mar11   0:00 /opt/google/chrome/chrome_crashpad_handler --monitor-self --monitor-self-annotation=ptype=crashpad-handler --database=/home/hugomarquez/.config/google-chrome/Crash Reports --url=https://clients2.google.com/cr/report --annotation=channel= --annotation=lsb-release=Debian GNU/Linux 11 (bullseye) --annotation=plat=Linux --annotation=prod=Chrome_Linux --annotation=ver=97.0.4692.99 --initial-client-fd=5 --shared-client-connection

Find the parent process and kill it!

$ kill 7670

Where 7670 is the process's ID, this will kill this process and all of its children, which will lead to closing the google chrome program on this example.

The Kill Command 💀

The kill command is used to send a signal to a process, the default signal for kill is TERM. If you need more information on this command and how to make a force kill, remember you always have man on your side.

$ man kill

Some form of control 😥

If you move your cursor or pointer and it moves, you might still have some form of control over the machine, you could try to xkill the process that is giving you trouble. xkill is a command that kills a client process by its X resource and it is a utility for forcing the X server to close connections to a client.

To use this utility, try to open up a terminal emulator with Ctrl+Alt+t and type xkill, the mouse pointer will change to an icon of a skull and crossbones, and the next window you click will be killed. It is worth mentioning that in KDE you can run xkill with Ctrl+Alt+Esc by default. On GNOME you can create your own macro to run the xkill command.

No control at all 😱

So you have tried Ctrl+Alt+t to open up a terminal emulator and... nothing happens. If this is your case, your Desktop Environment might be unresponsive as well, where your cursor doesn't move and your key presses seems to do nothing at all. You might be thinking "aagh maybe is time for a hard reset 🤢", but I'm here to tell you there might be another way.

TTY

TTY has a complex history going back to 1800's, but for our concerns it is worth to know that TTY stands for teletype and it is an abstract device in Linux. It might refer to a physical input device or to a virtual teletype where it allows users to interact with the system. We can see all the ttys in our system by cycling through tty1 to tty7, to do this we use the following commands Ctrl+Alt+F1 to Ctrl+Alt+F7.

If you do this you might have notice that tty1 is used to display logs and tty7 is used to run the desktop environment, that leaves us with tty2 to tty6 to try to find and kill the process that is giving you trouble. Try going to tty2, log in with your credentials and apply the ps and grep combo seen above.

The Last Resort 😭

If you have tried the above methods with no success, you might still have some sort of communication with the kernel. It might be time to use SysRq key in combination with the following to perform a reset:

1. Press Ctrl+Alt+F2 to switch to tty2.
2. Press Alt+SysRq+R to get the keyboard.
3. If pressing Ctrl+Alt+F2 before failed, try it again now.
4. Press Alt+SysRq+E to term all processes.
5. Press Alt+SysRq+I to kill all processes.
6. Press Alt+SysRq+S to sync your disks.
7. Wait for OK or Done message.
8. Press Alt+SysRq+U to umount all disk drives.
9. Wait for OK or Done message.
10. Press Alt+SysRq+B to reboot.

The letters REISUB is a mnemonic for Reboot Even If System Utterly Broken. To see the full list of available commands checkout the wikibook guide on linux freezes.

The Last Last Resort 🤮

If everything else has failed, well it might be time to perform a hard reset, this means to press the physical power button on your machine in order to send the signal to the kernel to perform a reset. If this doesn't work you could try long pressing or cutting off electrical power to the machine.

Resources

This post is based on information retrieved by the following guides and blog posts, so if you want more information on this matter I recommend you check them out:

Linux Guide/Freezes - Wikibooks, open books for an open world

Wikimedia Foundation, Inc.Contributors to Wikimedia projects

What is TTY in Linux? - It’s FOSS

You must have heard about the term “TTY” when it comes to Linux and UNIX. But, what is it actually? This article explains the essentials.

It's FOSSAnkush Das

Teleprinter - Wikipedia

Wikimedia Foundation, Inc.Contributors to Wikimedia projects