Blog

How Can Custom Mobile Development Affect Your Business’s Growth?

Thu, 20 Oct 2022 15:47:29 Z

Firstly, what does custom development mean?

Custom app development is the process of creating applications that are especially suited to a company’s needs. Whether fully or partially personalized, it is designed to meet the demands of a specific target market rather than a large audience.

According to Statista, there are more than six billion smartphone subscriptions worldwide, with this figure anticipated to rise by several hundred million in the next few years. Additionally, an average smartphone user actively goes on 10 apps per day. With the increased number of options and a decreasing attention span of users, it is essential to maintain a competitive advantage and showcase something unique that other apps cannot offer.

There are two ways to go about building a custom mobile application. One is to build a custom application from scratch, or to customize and build on existing software. Either way that you choose for your mobile application, brings a set of advantages that we will discuss in this article.

Core benefits of developing a custom application

1. Scalability

The significant benefit of developing a mobile application for your brand is that it can expand with your business. Pre-built software frequently has a specific objective in mind, whether it is a small company start-up or a large enterprise. It is tough to locate a software that can effortlessly switch between the two.

Custom development is an excellent option if you want to start small and observe how your business grows without constraints. Custom mobile applications will be ready to manage a bigger quantity of data and expand with your business after you've established your market position and begin scaling up.

2. A real representation of your brand’s identity

This is not to imply that mobile websites are unimportant. In fact, for greater flexibility, organizations could provide a compatible set of channels, including a mobile-friendly website and a mobile app, in order to be competitive.

A custom-made application has the advantage of differing from any pre-made software. It may be hard to stay competitive if your application cannot implement unique features, which other businesses cannot offer.

Custom mobile development makes it possible to create ideas and turn them into technologically feasible products. Whether you have a workout app or an on-demand delivery business, your brand’s identity should be truly represented through the application’s features and a seamless interface.

3. Building a connection with your users

The benefit of having a custom application is that there are no boundaries and limits when it comes to creating ways to interact with the app users. You can leverage the data that the user enters when creating an app account, and use it in order to personalize your customer service to the maximum. Implement the newest technology, such as live chatbots or personalized welcome messages, or pairing with external devices.

Custom mobile development allows for a higher level of personalization and interaction with your audience also in a visual way, for example through photos, videos, or voice recognition and real-time tracking of the delivery process. Depending on your industry, the options are limitless when it comes to creating a real, personal experience for your users.

4. Maintenance and control of the development process

Another advantage of custom mobile development is the bird’s eye view of the creation process. Rather than purchasing a ready off-the-shelf application, you can really engage with the development team and be a part of the creation process.

Additionally, since you will know the team and the insights of your app, the maintenance process is going to be a lot more efficient and accessible.

How to create a successful custom mobile app?

Find the right team

The first and most important aspect of custom development, is a creative and competent team, with a personal and open-minded approach. You are going to need a team, which is going to fully understand your creative idea and translate it into technology.

Creating an application is not only about its functionality, but it serves as a medium to represent your brand’s identity. Your team should be able to understand you as a brand and represent that through an excellent UX/UI that goes hand in hand with your brand’s personality.

From a seamless interface to the color scheme, visuals, and features. When choosing a provider, keep in mind their level of adaptability and interest in the concept and identity behind your brand, not only the technical aspects.

Follow the latest trends and customer demand

Research is crucial before starting to develop your custom application in order to determine whether your concept actually satisfies market demands. You can adapt your idea to fit the requirements of your niche, for instance, by incorporating features like connectivity with external devices or chatbots that can offer client support around-the-clock.

Specify the message that you want to convey through your app

Is the application supposed to be the main channel for your business, or more of an extension of your website? Before the development process, it is necessary to list down all the requirements for your application and make sure that you are clear in terms of your vision with the development team. Clear communication will allow them to create a product that truly visualizes the idea that you have in mind and exceeds your expectations.

If you have an excellent idea in mind, but are not an expert in technology, contact one of our team members today and let us help you bring your custom mobile app vision to life.

How to quickly write and run Kotlin script - practical guide

Tue, 30 Aug 2022 15:47:29 Z

Recently, we completed a test with a large address book containing thousands of contacts. To have such a vast collection, we needed to generate a vCard file with random contacts.

The easiest way to execute Kotlin code quickly in Android Studio project is by creating an empty Kotlin file, and typing psvm to auto-generate main function (or psvma for one with args). Inside it, we can write our Kotlin code. Last step is to click the green run button next to the main and viola — code is executed with the output presented.

Since parameters should always be given via altering configuration in the "Program Arguments" area, it is not a simple or easily reproducible setup from my perspective.

I came to the conclusion that it will be easier to have it in the form of an executable script from the command line. As Kotlin has that ability with .kts (Kotlin script) files, I started looking for ways to achieve it in the fastest and simplest way possible.

Following is the summary of my discoveries:

Setup

• What you need is kotlin compiler in order to run our script from command line.

    brew update
    brew install kotlin

• As I’m using mac and brew, this command was the simplest to get, but if you have a different hardware/software setup, use these instructions.

• Text editor - I’ve just used Android Studio, but anything that understands Kotlin will be enough.

Script

There are several ways of creating and running scripts with Kotlin. The easiest one to use is called Kotlin-main-kts.

Let’s create the easiest hello-world script with it:

• create file with .main.kts extension e.g. helloworld.main.kts

• add “header” as a first line to indicate it should be our Kotlin script

   #!/usr/bin/env kotlin

• below it insert your script content e.g. println("Hello world.")

• make your file executable with chmod +x helloworld.main.kts

• now you can run your script with standard command of running executable files ./hellowrold.main.kts — remember that in order to run it, other people will also need to install Kotlin compiler

Arguments

Arguments are accessible right away by calling args e.g. args[0]

No main function needed as we’re inside of it. So all code is wrote top-level like.

if (args.size != 2) {
    println("Please specify exactly 2 arguments in this example")
} else {
    println("Your arguments are: ${args[0]}, ${args[1]}")
}

Now run it with: ./helloworld.main.kts “Hello” “World”

Which is equivalent to: kotlinc -script helloworld.main.kts "Hello" "World"

That’s it - quick and easy to use or run.

For a curious real-life yet very basic example here’s our vCard file generating script:

#!/usr/bin/env kotlin

import java.io.File

fun generateVCard(numberOfContacts: Int): String {
    val vCard: StringBuilder = StringBuilder()
    (1..numberOfContacts).forEach { number ->
        vCard.append(
            """
            BEGIN:VCARD
            VERSION:3.0
            PRODID:-//Apple Inc.//macOS 12.4//EN
            N:Surname$number;Name$number;;;
            FN:Name$number Surname$number
            TEL;type=CELL;type=VOICE;type=pref:+48 101 000 $number
            END:VCARD

            """.trimIndent()
        )
    }
    return vCard.toString()
}

if (args.size != 1) {
    println("No argument. Please specify number and try again")
} else {
    val numberOfContacts = args[0].toIntOrNull()

    if (numberOfContacts == null) {
        println("Specified number is not Integer, please try again")
    } else {
        println("Executing script")

        val vCard = generateVCard(numberOfContacts)

        File("contacts$numberOfContacts.vcf").writeText(vCard)

        println("Generating vCard completed.")
    }
}

About the Author

Krzysztof Marczewski is an Android Developer at Angry Nerds, focused on developing great code and constantly growing his tech skills. Delighted with Kotlin, Compose, and multiplatform. Non-fiction bookworm who loves minimal UI, smart UX, and clever copywriting. He writes his development-related blog - https://selfformat.com/.

Reviewing GitHub Copilot Reviews - Is AI Pair Programming Worthwhile?

Fri, 19 Nov 2021 17:30:00 Z

Will AI replace programmers? When GPT-3 from OpenAI came along, it was most visibly praised for writing human-like articles. At the same time, many programmers used GPT-3 to write HTML and CSS, or do things like program SQL database requests.

The hype for AI pair programming started gaining steam, and then GitHub’s Copilot came out. The heart of Copilot is an engine that predicts code. It’s based on OpenAI Codex (GPT-3’s kid with a special knack for programming), it's trained on public code from all of GitHub’s users, and it's controversial.

The Free Software Foundation even called it “unacceptable and unjust”, bringing into light many important issues. For example, if Copilot gives you code that’s exactly the same as someone else’s, aren’t you breaking copyright?

It’s a tricky, legally unregulated area. GitHub responded to criticism very positively, with a statement that they are “keen to engage in a discussion with developers on these topics and lead the industry in setting appropriate standards for training AI models”.

Copilot was released in July, the criticism from FSF was back in August, and now we’re nearing the end of 2021. How is Copilot doing, and has GitHub kept its promises? To find out, we're going to review several reviews published online by different tech experts.

GitHub Copilot’s Limitations 🤖

Copilot is paving the way towards AI programmers. There are at least ten alternatives, but for the time being, GitHub’s product is the most hyped up.

Nonetheless, Copilot has limitations:

It comes as an add-on to only a few most popular code editors;
It’s free, but there’s a waitlist to get access;
It’s still a technical preview version, not a complete product.

For the time being, Copilot isn’t a great, well-rounded programmer in its own right. It’s more of a helper. It watches what you’re doing and suggests different options to push your coding along.

Sometimes it writes decent code for you. Other times it writes bad code:

“You absolutely need to review the code that Copilot generates. Treat it as though it was written by a green programmer intern who is good with Google searches but needs close supervision.” - Martin Heller, InfoWorld

The main promise of AI engines, like the one that powers Copilot, is that they get better with time. As users keep generating new data, Copilot will keep getting smarter.

At the moment, you can’t just unleash Copilot on your code and let it rip. Human review is still a critical element to ensure that AI-generated code is OK:

“That 'human in the loop' review stage is important to the responsible use of large language models because it's a way to catch a problem before [...] the code goes into production. Code licences are one issue when it comes to writing code, but AI-generated text could create all sorts of headaches, some embarrassing and some more serious.” - Mary Branscombe, ZDNet

Expert reviews of Copilot and AI pair programming 💬

Whenever there’s a lot of hype around something, it’s good to seek out level-headed people that can offer perspective on the subject.

Just by looking at the stats, it seems that Copilot is doing great. GitHub reportedly found on their platform that “about 30% of newly written code is being suggested by [...] Copilot”. Plus, half the developers who tried Copilot kept on using it regularly.

To further understand why the industry seems to be liking AI pair programming and GitHub Copilot, let’s see what tech experts are saying about it online.

“Feels quite magical to use” 🔮

Jeremy Howard, a founding researcher at fast.ai, sees Copilot as a blessing on one hand and a potential curse on the other.

He notes that Copilot isn’t the first AI-powered pair programmer but it’s the most powerful so far, because “it can generate entire multi-line functions and even documentation and tests, based on the full context of a file of code”.

“The code Copilot writes is not very good code”, however, “complaining about the quality of the code written by Copilot feels a bit like coming across a talking dog, and complaining about its diction. The fact that it’s talking at all is impressive enough!”.

Mr Howard explains that Copilot is kind of doomed to be inaccurate. The reason lies at the heart of how AI models like this work. Copilot doesn’t understand whether the code is good or not. But it has analyzed endless codebases similar to yours, so it can predict what your code should look like.

You’re going to have to edit Copilot’s code down, though: “Copilot’s code is verbose, and it’s so easy to generate lots of it that you’re likely to end up with a lot of code!”.

Copilot might be a good thing, but there’s a possibility that it could wreck your project with a sort of death by a thousand cuts: “For those for whom it’s a curse, they may not find that out for years, because the curse would be that they’re learning less, learning slower, increasing technical debt, and introducing subtle bugs – are all things that you might well not notice, particularly for newer developers”.

Ultimately, for Mr Howard, Copilot didn’t fulfil the promise of being an AI pair programmer right after launch (his review is from July). But it was still a huge step for code-generating language models. Plus, it was already visibly useful in some niche areas, like helping coders get comfortable with a new programming language.

If we want AI that writes code fully by itself, “we’ll need to go beyond just language models, to a more holistic solution that incorporates best practices around human-computer interaction, software engineering, testing, and many other disciplines”.

“It's not gonna take our jobs anytime soon” 🙅‍♀️

In a review from the Stack Overflow Podcast crew, we hear that Copilot is great for boilerplate code (repetitive, non-creative things you need to write to enable standard functionalities), but “if you start doing anything more complex than that, that's when you start to say, okay, you need to calm down Copilot”.

Another reviewer on the podcast thinks “it's actually very aptly named Copilot because you are supposed to be the pilot, and you're supposed to write most of the code”.

Throughout the episode, reviewers echo the sentiment that Copilot is great for those standard things that developers always have to Google. The small things that developers have written millions of times in the same way, so Copilot doesn’t have any issue knowing what the best option is.

One of the reviewers is convinced that Copilot is “a lot like the Gmail autocomplete”. Just like Gmail finishes phrases like 'All the best' for you, Copilot is great as an autocomplete for developers.

It seems that Copilot didn’t amaze the Stack Overflow Podcast crew with its capabilities, but it was definitely an impressive prequel to the future of AI pair programming.

Just like the first one, this review is from July. So now let’s check out a fresh review from November 13, 2021.

”Productivity boost that will most likely create more jobs” 💪

Programmer / YouTuber sentdex notes that Copilot’s engine is much lighter than GPT-3 (12 billion parameters compared to 175 billion parameters), so it’s much faster to run.

GPT-3 had a limit of 4kb for context file weight. Copilot has a limit of 14kb which, as sentdex shows, is about 400 lines of code. To be clear, Copilot will still work on files bigger than that, but it can only take those 400 lines of code as its context for code prediction.

He goes on to show proof that Copilot has some deeper understanding of the code, it’s not just pattern-matching code lines to each other, because it can predict the outputs of functions with perfect accuracy.

Ultimately, sentdex sees Copilot as another layer of abstraction from code. He compares it to using Python instead of C++:

with Python, you can build bigger things faster because you’re using bigger, ready-made blocks;
with C++, you have to specify every tiny detail in your code and build your own blocks, so it takes longer to build big things.

This makes Copilot a great productivity boost. Sentdex has a refreshing perspective, saying that tools like Copilot won’t kick programmers out of their jobs. Instead, AI pair programmers will be a way for software developers to build more things, get more experience, and increase their value on the market.

Another great thing that sentdex found in his review is that Copilot fosters fast learning. When sentdex wanted to check out a new code library, he just wrote a prompt and Copilot guided him through using that library. It even showed him methods that he didn’t know existed.

Normally developers need to go through pages of documentation and several Stack Overflow threads when starting to use a new tool. Having an AI friend give you a quickstart guide instead of doing all of that research has to be very convenient.

When it comes to limitations, sentdex noticed that Copilot makes mistakes. It doesn’t always understand your intention. Just like with Googling, writing prompts that get Copilot to do exactly what you want is a skill that takes time to learn.

Ultimately, sentdex admits that he generally doesn’t like tools like this so he didn’t expect to like Copilot. However, he was very positively surprised and found Copilot very useful, and perfect for increasing productivity as a software developer.

Decent assistant, long way from replacement 🚧

The general consensus seems to be that Copilot is a great tool that can enhance your productivity, but it won’t solve all of your problems for you, and you’ll probably need to edit Copilot’s code quite a bit.

But, if you’re a software developer who's willing to take advice from a robot assistant, you might just:

learn new things quicker than before,
enhance your productivity,
increase your value on the software development market.

Copilot, along with its biggest competitors, opened the door towards mass adoption of AI programming assistants. It’s unlikely that these systems will make programmers obsolete. Plus, this technology is still limited. To replace programmers, we would need powerful Artificial General Intelligence (AGI), meaning systems that think like humans.

We’re still far from developing technology like this. And, if almost all of science-fiction is to be believed, the development of AGI would cause problems much bigger than unemployment among programmers—leaving even fewer reasons to worry about it.

CSS tips and tricks for text-based content

Mon, 07 Dec 2020 09:59:06 Z

This is why today, instead of exploring advanced Javascript’s logic, Typescript’s shadows, and new versions of Angular, we want to get back to basics and share with you some useful tricks in CSS that can help you improve and speed up your daily work with styling text content.

Selectors

There are a lot of available selectors in CSS that can specify the exact element you want to style. We chose a few to show you their power - and inspire you to discover more.

> in the selector selects the direct child of the element. It’s very useful for example when you want to change the styles of paragraphs in a particular section. The below code will change styles of paragraphs only if they’re direct children of the .sidebar container.

.sidebar > p

+ in the selector selects only the adjacent sibling of the first element. The below code will change styles of the paragraph which is placed directly after the .sidebar container, but not inside of it.

.sidebar+p

You can also use + with * sign and easily select all paragraphs on your website.

*+p

:first-letter added to a selector will change the style of the first letter only and make a drop cap.

p:first-letter {
color: #07072d;
display: block;
font-size: 3em;
float: left;
margin: 0 3px;
}

In the most common cases :nth-child() is used by developers with static value (:nth-child(2)) to select the exact child of the element. But did you know that you can use this selector also with an expression? For instance, if you have a leaderboard and want to change the font color of the top three you can simply select them by:

:nth-child(-n + 3)

Counters

Counters in CSS allow you to automatically number the elements on the website based on how many times they’re used. There are a few simple rules you should know before starting using counters:

→ Counters should be initialized by counter-reset property (0 by default):

counter-reset: section;

→ You have to specify the value of the element which should increment the counter:

counter-increment: section;

→ You have to set the counters’ content:

content: "Section no. " counter(section) ": ";

→ To combine counters in nested lists use counters() method and join counters into one value:

content: counter(section) "." counter(article) " ";

Here’s the result - all the characters in orange are made with CSS only:

Shape-outside

A wall of text looks boring and you want to add some pictures to your article without interrupting users’ reading? The shape-outside property will be helpful in blending the content together.

shape-outside: inset(70px 0px 60px 0px);

At first look, it doesn’t look very special but imagine you can mix it with clip-path property and adjust text and indentations to every shape you can think of - isn’t it cool?

shape-outside: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);

Line-clamp

Small wrapper and a lot of text? To avoid breaking the layout you need to cut the text and make it fit the size of the container. You can do it simply by

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

and change this:

into this:

Nice, but we clipped a lot of content and now it’s almost unreadable for the user. If you want to cut the text, e.g. after the 3rd line, it’ll be a little challenging to do it this way. Of course, you can do it once and reuse the code every time you need, but you can also just use the line-clamp property and effortlessly achieve this:

-webkit-line-clamp: 3;
-webkit-box-orient: vertical;  
display: -webkit-box;
overflow: hidden;

::selection

Do you know that you can change the styles of the text highlighted by the user? Using pseudo-class ::selection you can change styles to whatever you want and make your website more customized, consistent - and simply cool!

Hope you enjoyed these CSS tips and tricks! We encourage you to try them out and see for yourself how they can make your work easier and more enjoyable. Let us know if you have any questions or want to share your thoughts!

Happy styling 🎨

You may be also interested in:

➤ How to optimize an Angular app. 13 tips for front-end developers
➤ 8 useful Chrome extensions for front-end developers
➤ Automating repetitive actions with Selenium WebDriver and Node.js

About the Author
Weronika Szymańska is a front-end developer at Angry Nerds – which means her job is to reconcile our designers’ unlimited imagination with equally unrestrained ideas of back-end devs. And she’s great at it! She has strong experience in JavaScript and Angular development and loves to share tips and tricks she uses in her daily work. When she's not coding, she can be found hiking in the mountains or reading crime stories.

Chain of Responsibility design pattern – with examples

Mon, 31 Aug 2020 10:04:59 Z

Design patterns can be divided into three groups: creational, structural, and behavioral. Chain of Responsibility belongs to the behavioral one – which is a group of design patterns that help with better interaction between objects in your code.

TIP: There is a classic book discussing this topic and describing 23 design patterns - "Design Patterns: Elements of Reusable Object-Oriented Software". You should definitely read it if you are not familiar with the matter.

Let's learn more about the Chain of Responsibility with some practical examples

The Chain of Responsibility pattern is used to replace statements like if ... else if ... else with more object-oriented form. Let's consider calculating a tax amount that is different for each country. The first version of the method handling this calculation could look like this:

It does not look that complicated, but the code can easily become longer and more laborious with time. In the next version, the tax may be calculated differently for various types of products, we may also have more countries that we want to calculate tax for. Moreover, at some point in the future, the law may be changed and that will result in different formulas based on date. This is a perfect example to use the Chain of Responsibility pattern. Take a look at the tax calculation problem implemented with this pattern:

In this version, we don't have five if statements in one method and each type of tax is calculated by its own class. That way our code follows the Single Responsibility Principle, which is one of the most important rules in clean coding. To use these new classes, we have to create an instance of each class and set value for Next property. See an example here:

If you had trouble with understanding how it works, I recommend you set a breakpoint and use a debugger to check which instructions are executed.

Here is another example – an algorithm that recommends you the next video to watch based on your age. This is a really simple example because it always returns the same video, but it fits nicely into the Chain of Responsibility pattern.

And the third example – it's the code for an ATM that checks if it can dispense cash using a finite number of notes inside the machine. In this case, we will have just one implementation of an abstract class, but we will define a chain consisting of three links using that one class.

Here is how we can use it:

By now, I think you have already grasped the concept of the Chain of Responsibility pattern. Here is a class diagram and a sequence diagram that presents it:

Photo via Wikimedia Commons

Chain of Responsibility vs other patterns

Chain of Responsibility vs Decorator

The Chain of Responsibility design pattern may appear similar to the Decorator design pattern but the key difference is that the former can be stopped at any part of the processing, and the latter executes all steps (assuming that passed data was valid and it didn't throw an exception). Decorator adds something with each step.

Chain of Responsibility vs Strategy

With the Chain of Responsibility pattern, each object is responsible for executing an action on the next object, whereas, with the Strategy pattern, the client of that code has to decide which implementation should be used.

What next?

I strongly recommend you to read the book mentioned in the intro: Design Patterns: Elements of Reusable Object-Oriented Software. You can also watch a series of courses on Pluralsight in the design patterns path. There is also a fun experiment that you can check out on GitHub: FizzBuzz Enterprise Edition is a no-nonsense implementation of FizzBuzz made by serious businessmen for serious business purposes.

Feel free to share your thoughts or questions in the comments!

You may be also interested in:

➤ 11 extremely useful Git commands every developer should know
➤ Avoiding Anemic Domain Model
➤ Master your git log with Conventional Commits in 6 steps

About the Author
Marcin Zarębski is an experienced back-end developer, specializing in. .NET platform. He has amazing skills in building complex backend solutions and infrastructure. Marcin is also interested in space exploration and the role of computer science in it. He likes to spend his free time in the mountains or playing board games.

Avoiding Anemic Domain Model

Thu, 18 Jun 2020 10:16:11 Z

Anemic Domain Model is a software pattern where classes representing domain objects contain only data and little or no logic in methods. Does it sound familiar? Maybe it is a consequence of using one of the most popular ways of organizing application logic into layers.

You see the data layer and it may be quite natural to think of this as a table in a relational database. It is true that the objects from the data layer will be often used to preserve some data in a relational database but additional work is required to send data from those objects. The bottom line is that objects are not tables.

Using Anemic Domain Models is a direct violation of one of the core concepts in object-oriented programming. Having Anemic Domain Models leads to code duplication and a lack of encapsulation. Check out this excellent blog post by Martin Fowler. Let's see some examples.

All examples in this post are in C#.

public class Company
{
    public int Id { get; set; }
    public DateTime CreatedAt { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public decimal ShareCapital { get; set; }
}

Company class is used by a service layer to create/update new companies, and that service is injected in some API controller. CompanyService class contains the necessary logic - here is a draft of that service. Let's omit the controller class as it is straightforward.

public class CompanyService
{
    public void Create(CreateCompanyModel model)
    {
        if (!string.IsNullOrWhiteSpace(model.Name))
        {
            throw new Exception("name is required");
        }

        Company company = new Company
        {
            Id = ... //generate Id
            CreatedAt = DateTime.UtcNow,
            Name = model.Name
        };

        // save company in database
    }

    public void Update(UpdateCompanyModel model)
    {
        // validate model if necessary

        Company company = ... // get company from database
        company.Description = model.Description;
        company.ShareCapital = model.ShareCapital;

        // update company in database
    }
}

Potentially, there could be a couple of scenarios where new companies will be created or updated. Maybe we want to create a Business Corporation by following a different path than the path for General Partnership or a Limited Liability Company. This is something that will be defined by business needs.

Right now, there is nothing in the Company class that helps you understand what are the required properties and what are the optional properties. There are no validation rules included. Probably the Name and CreatedAt should be required - and it may be obvious to someone but when you have a model with 20 properties it may be harder to choose a subset of required properties.

Moreover, sometimes properties' values could be automatically deduced when a new instance is created, e.g. CreatedAt seems like something that could be set behind the scenes. If only we defined a constructor, we would make creating a company easier. We could replace the above code with:

public class Company
{
    public int Id { get; set; }
    public DateTime CreatedAt { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public decimal ShareCapital { get; set; }

    public Company(string name)
    {
        if (!string.IsNullOrWhiteSpace(name))
        {
            throw new Exception("name is required");
        }

        Id = ... //generate Id
        Name = name;
        CreatedAt = DateTime.UtcNow;
    }
}

Now our client can't create a new company using default constructor without Name or CreatedAt values. This is good because it is a business rule that we want to enforce in our domain. However, he can still update Name or CreatedAt date. Does it make sense? As always, it depends. Let's assume that business rule is that we should change neither CreatedAt nor Name values. To do that, we will replace public setters with private setters in Company class.

public class Company
{
    public int Id { get; private set; }
    public DateTime CreatedAt { get;  private set; }
    public string Name { get;  private set; }
    public string Description { get;  private set; }
    public decimal ShareCapital { get; private set; }

    public Company(string name)
    {
        if (!string.IsNullOrWhiteSpace(name))
        {
            throw new Exception("name is required");
        }

        Id = ... //generate Id
        Name = name;
        CreatedAt = DateTime.UtcNow;
    }
}

A new problem arose that has to be addressed. In this version, we cannot set value for optional properties Description and ShareCapital. To fix that, we will add new methods: UpdateDescription, UpdateShareCapital. The idea is that for specific scenarios we want to have separate methods that will act accordingly. In more complex scenarios such a method would do more than setting value for one property, e.g. set more values, like the last update date.

public class Company
{
    public int Id { get; private set; }
    public DateTime CreatedAt { get; private set; }
    public string Name { get; private set; }
    public string Description { get; private set; }
    public decimal ShareCapital { get; private set; }

    public Company(string name)
    {
        if (!string.IsNullOrWhiteSpace(name))
        {
            throw new Exception("name is required");
        }

        Id = ... //generate Id
        Name = name;
        CreatedAt = DateTime.UtcNow;
    }

    public void UpdateDescription(string description)
    {
        Description = description;
    }

    public void UpdateShareCapital(decimal shareCapital)
    {
        ShareCapital = shareCapital;
    }
}

Another advantage of this approach is discoverability - i.e. when you look at the object, you discover what you can do with that object. With an Anemic Domain Model, this is harder and potentially more confusing.

Value objects

We will define the concept of value objects that are useful building blocks in creating rich domain models. Eric Evans defines value objects this way:

An object that represents a descriptive aspect of the domain with no conceptual identity is called a VALUE OBJECT. VALUE OBJECTS are instantiated to represent elements of the design that we care about only for what they are, not who or which they are.

[Excerpt from "Domain-Driven Design: Tackling Complexity in the Heart of Software", p. 59]

Examples of value objects are numbers, strings, money, addresses, colors, etc. When you think about it, there is quite a natural distinction between entities and value objects. For example, if you have a product that costs $100, it doesn't matter which $100 it is. When you design a value object, you have to make them immutable. Fulfilling the immutability requirement can be a little tedious. We will use value object implementation proposed by msdn (check here).

public abstract class ValueObject
{
    protected static bool EqualOperator(ValueObject left, ValueObject right)
    {
        if (ReferenceEquals(left, null) ^ ReferenceEquals(right, null))
        {
            return false;
        }
        return ReferenceEquals(left, null) || left.Equals(right);
    }

    protected static bool NotEqualOperator(ValueObject left, ValueObject right)
    {
        return !(EqualOperator(left, right));
    }

    protected abstract IEnumerable<object> GetAtomicValues();

    public override bool Equals(object obj)
    {
        if (obj == null || obj.GetType() != GetType())
        {
            return false;
        }

        ValueObject other = (ValueObject)obj;
        IEnumerator<object> thisValues = GetAtomicValues().GetEnumerator();
        IEnumerator<object> otherValues = other.GetAtomicValues().GetEnumerator();
        while (thisValues.MoveNext() && otherValues.MoveNext())
        {
            if (ReferenceEquals(thisValues.Current, null) ^
                ReferenceEquals(otherValues.Current, null))
            {
                return false;
            }

            if (thisValues.Current != null &&
                !thisValues.Current.Equals(otherValues.Current))
            {
                return false;
            }
        }
        return !thisValues.MoveNext() && !otherValues.MoveNext();
    }

    public override int GetHashCode()
    {
        return GetAtomicValues()
         .Select(x => x != null ? x.GetHashCode() : 0)
         .Aggregate((x, y) => x ^ y);
    }
    // Other utility methods
}

We can inherit from ValueObject class to define Money value object.

public class Money : ValueObject
{
    public string Currency { get; private set; }
    public decimal Value { get; private set; }

    private Money() { }

    public Money(string currency, string value)
    {
        Currency = currency;
        Value = value;
    }

    protected override IEnumerable<object> GetAtomicValues()
    {
        yield return Currency;
        yield return Value;
    }
}

A word of caution must be mentioned here. Initially, you may be tempted to use struct as a value object. Even though it may seem like a good idea, it has major disadvantages. Read this blog post to learn why. We can use Money class in ShareCapital property of Company class. With that change, we completed transforming an anemic model into a rich model. This is a new version of Company class:

public class Company
{
    public int Id { get; private set; }
    public DateTime CreatedAt { get; private set; }
    public string Name { get; private set; }
    public string Description { get; private set; }
    public Money ShareCapital { get; private set; }

    public Company(string name)
    {
        if (!string.IsNullOrWhiteSpace(name))
        {
            throw new Exception("name is required");
        }

        Id = ... //generate Id
        Name = name;
        CreatedAt = DateTime.UtcNow;
    }

    public void UpdateDescription(string description)
    {
        Description = description;
    }

    public void UpdateShareCapital(Money shareCapital)
    {
        ShareCapital = shareCapital;
    }
}

We could benefit from using value objects instead of primitive types. The code will be well-organized and understandable, and it will help us avoid code duplication. There is even a term for the situation when your domain code relies heavily on primitive types - we call it a primitive obsession.

Refactor CompanyService

We can simplify CompanyService by using a new version of Company class and by removing company logic that is encapsulated inside Company class. Here is the result of that change:

public class CompanyService
{
    public void Create(CreateCompanyModel model)
    {
        Company company = new Company(model.Name);

        // save company in database
    }

    public void UpdateDescription(string description, int companyId)
    {
        Company company = ...// get company from database
        company.UpdateDescription(description);

        // update company in database
    }

    public void UpdateShareCapital(Money money, int companyId)
    {
        Company company = ...// get company from database
        company.UpdateShareCapital(money);

        // update company in database
    }
}

This code is much cleaner than the original version, and more object-oriented. It is also more expressive.

Potential problems

▶ When you develop a small application, transforming it into rich models may not be worth it.

▶ Additional work has to be done to make it work with popular ORM frameworks, e.g. NHibernate or Entity Framework. It is possible but it is not out of the box support.

▶ The setup of your tests may become more complex. It can also be a good thing because your tests are closer to real-world scenarios. When you create your domain models in test, then you are forced to comply with all business rules that are implemented in your application.

In general, I believe it is worth going the extra mile if you know that a project will be developed in a longer perspective.

Where to go next?

I highly recommend you a Pluralsight course Refactoring from Anemic Domain Model Towards a Rich One by Vladimir Khorikov. You should also read Kamil Grzybek's blog, especially posts related to Domain-Driven Design. If you want to learn more about Domain-Driven Design, you can start by reading the book Implementing Domain-driven Design by Vaughn Vernon.

If you have any questions, feel free to leave us a comment!

Master your git log with Conventional Commits in 6 steps

Tue, 28 Apr 2020 10:27:32 Z

Such messages tell us absolutely nothing about the project, and soon turn following changes into hell. Sad reality of being a software developer?

Source: xkcd

Not anymore! We hope that after reading this article you will no longer have problems with self-discipline, and you will learn how to better document your work. We will also show you how to automate it all, avoid inappropriate commit message format and properly version the modules.

Introduction

Semantic Versioning, Conventional Commits and related tools are powerful – and very easy to use! They’ll not only take your skills to the next level, but also speed up the development process. Their advantages are significant:

→ generating changelogs and determining the next module version can be automated (based on commit messages),
→ the whole process of building and publishing the module can be automated,
→ contributing to your project is easier thanks to a more structured commit history.

Before we start with Conventional Commits, we need to know what the Semantic Versioning is.

1. Semantic Versioning

You probably already use something similar to Semantic Versioning in your projects, but that's not enough, especially when the project is a complex one. At some point you might get stuck in a dependency hell – and you really wouldn’t like that:

"In the world of software management there exists a dreaded place called "dependency hell". The bigger your system grows and the more packages you integrate into your software, the more likely you are to find yourself, one day, in this pit of despair. In systems with many dependencies, releasing new package versions can quickly become a nightmare. If the dependency specifications are too tight, you are in danger of version lock (the inability to upgrade a package without having to release new versions of every dependent package). If dependencies are specified too loosely, you will inevitably be bitten by version promiscuity (assuming compatibility with more future versions than is reasonable). Dependency hell is where you are when version lock and/or version promiscuity prevent you from easily and safely moving your project forward."

Source: semver.org

So, what is Semantic Versioning?

It's the way we version the project, and the main guidelines are the following:
1. Increment major version when you make incompatible API changes
2. Increment minor version when you add functionality in a backwards compatible manner
3. Increment patch version when you make backwards compatible bug fixes
4. Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format

And that's it! Isn't it simple? You can learn more about Semantic Versioning at semver.org.

2. Conventional Commits

The big questions is: which version should we increment? Conventional Commits come to the rescue! This lightweight specification provides an easy set of rules for creating an explicit commit history. Features, fixes and breaking changes made in commit messages allow to determine which version should be released next.

The commit message should be structured as follows:

type(optional scope): description
[blank line]
[optional body]
[blank line]
[optional footer(s)]

Types of commits:
• fix: it patches a bug in your codebase (this correlates with PATCH in semantic versioning).
• feat: it introduces a new feature to the codebase (this correlates with MINOR in semantic versioning).
• BREAKING CHANGE: a commit that has a footer BREAKING CHANGE:, or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in semantic versioning). A BREAKING CHANGE can be part of commits of any type.

Types other than fix and feat are of course allowed - the Angular convention recommends: build, chore, ci, docs, style, refactor, perf, test, and others. Learn more here: conventionalcommits.org.

3. Lint commit messages

Once you know what Conventional Commits are, it's a good idea to be consistent and follow these rules, and preferably use a lint to keep a wrong commit message from passing on to the git history. With this tool, you will find out where you made a mistake when writing your message, and get tips on how to fix it.

How to use it?

Install commitlint dependencies:

npm install --save-dev @commitlint/config-conventional @commitlint/cli

Create commitlint.config.js file with the following content:

module.exports = {extends: ['@commitlint/config-conventional']};

Install husky:

npm install --save-dev husky

Extend your package.json:

// package.json 
{
  "husky":
    {
      "hooks":
        {
          "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
        }
    }
}

Test your latest commit:

npx commitlint --from HEAD~1 --to HEAD –verbose

This configuration is enough for a start, and if you want to learn more about the potential of this tool, have a look here: commitlint.js.org.

4. Conventional Changelog

How to generate a changelog with Conventional Commits? There are several ways to do this, but the best one is conventional-changelog-cli, which is a standardized cli tool. How to use this tool? Just install it globally using npm install -g conventional-changelog-cli If this is your first time using this tool, and you want to generate all previous changelogs, you could do it as follows:

conventional-changelog -p angular -i CHANGELOG.md -s -r 0

You could use conventional-changelog -p angular -i CHANGELOG.md -s to extend the changelog with the changes since the last version. All available command line parameters can be listed using CLI: conventional-changelog –help. Get packages at conventional-changelog.

5. npm version

Okay, we know how to generate a changelog, but how to automate it? To do this, we will use the npm version script and it's pretty easy to do, just take a look at this command:

npm version [ | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid= ] | from-git]

For example, you can use such combinations:

npm version major
npm version minor
npm version patch
npm version prerelease --preid=alpha
npm version prerelease --preid=beta
npm version prerelease --preid=rc

Once you know what the npm version command looks like, you can upgrade it with an additional changelog feature. Just type into package.json scripts:

"version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"

This will extend CHANGELOG.md file with a log of recent changes in the code, based on the commit messages. You could also use preversion and postversion scripts to run tests before the version script, and push changes or publish package after that. Learn more here: docs.npmjs.com/cli/version.

6. .npmrc

Can the process of versioning be even more automated? Sure! By adding a .npmrc file you could also automate your commit message and set your tag prefix. To do this, simply create .npmrc file or run the npm config command with the following content:

tag-version-prefix=""
message="chore(release): %s :tada:"

This way, every time a new version is called up, a new commit will be created with a Conventional Commit message. Learn more about the configuration here: docs.npmjs.com/configuring-npm/npmrc

Summary

As you can see, a few easy steps can take your project management to a higher level, and help you stop treating commit messages like a burden.

This article is also a good introduction to process automation in software development. What we have shown is only one of the possibilities! You have many conventions to choose from, you can expand your scripts with additional features and adapt them to each of your projects.

Don’t be afraid to commit – and enjoy the coding!

About the Author
Aleksander Niedźwiedź is an ambitious young lad who, despite only a few years of professional experience, has already proven to be a talented developer. At Angry Nerds, he specializes in front-end development, but he has also some skills in back-end technologies. He’s also up to date with the latest trends and best practices in software development. Aleksander likes to spend his free time in an active way, so you can spot him practicing various sports.

How to optimize an Angular app. 13 tips for front-end developers

Wed, 18 Mar 2020 13:40:31 Z

Optimization is a process, and it should start at the same time as the app development. It’s really hard to optimize the application that already exists (though it’s still possible of course), so we should take care of it during the whole project.

Here's a list of the best tips to help keep your code in line with good practices and make your Angular application faster. Enjoy and optimize!

1. Code minification

Trivial, but really important - each part of the application should be minified before deploying to the production stage. If you have ever used Webpack, you probably know plugins such as UglifyJS, MinifyCSS, etc. They remove every whitespace and every function that is never executed. Moreover, they change functions' and variables' names to shorter ones that make the code almost unreadable, but the size of the compiled bundle is smaller. Fortunately, with Angular, we don’t have to remember to add Webpack scripts to minify the code. All we have to do is make a bundle using ng build --prod command. It’s just good to know when and how it happens.

2. OnPush Change Detection

Each Angular component has its own Change Detector that is responsible for detecting when the component data has been changed, and automatically re-render the view to reflect the changes. Change Detector is called whenever DOM emits an event (button click, form submit, mouseover etc.), an HTTP request is executed, or there’s an asynchronous interaction such as setTimeout or setInterval. On every single event, the Change Detector will be triggered in the whole application tree (from the top to the bottom, starting with the root component).

The numbers show the order of checking the changes by the Change Detectors after the event in the Component in the left bottom corner. To change Detection Strategy for the component, the changeDetection in Component declaration should be set to ChangeDetectionStrategy.OnPush as below:

@Component({
   ...
   changeDetection: ChangeDetectionStrategy.OnPush
})

After that, the Change Detectors will work by comparing references to the inputs of the component. Inputs in this component are immutable and if values in these inputs have not changed, change detection skips the whole subtree of Change Detectors, as depicted below:

Change detector for a component with OnPush Strategy will be triggered only when a value in @Input() has been changed, an event has been emitted by a template, an event has been triggered by Observable in this component or this.changeDetector.markForCheck() has been called.

3. Pure pipes instead of functions/getters in templates

class foo {
   private _bar: boolean = false;
   get bar(): boolean {
      return this._bar;
   }
}

get used in the view is nothing more than a function call. A better idea is to use pure pipes which will always return the same output, no matter how many times they will receive the same input. If the Change Detector reaches this view and pure in the pipe is set to true (default), the Change Detector will not check if that value has been changed because it knows that it will return exactly the same value.

4. Async pipe

<div>Time: {{ time | async }}</div>

The async pipe allows subscribing to Observable directly from the template. With async pipe, there's no need to bother about unsubscribing. What’s more, Change Detector will check if the value was changed only when Observable had changed itself.

5. Unsubscribing

When using RxJS, it’s really important not to forget about unsubscribing, otherwise there’s a risk to get memory leaks in our application. There are a few methods to unsubscribe a Subscription, but choosing the best one is probably a subject for another blog post - for now, just remember to do it. Here are the methods →

1st method:

let sub1: Subscription;
let sub2: Subscription;

ngOnInit() {
   this.sub1 = this.service.Subject1.subscribe(() => {});
   this.sub2 = this.service.Subject2.subscribe(() => {});
}

ngOnDestroy() {
   if (this.sub1) {
      this.sub1.unsubscribe();
   }
   if (this.sub2) {
      this.sub2.unsubscribe();
   }
}

2nd method:

let subs: Subscription[] = [];

ngOnInit() {
   this.subs.push(this.service.Subject1.subscribe(() => {}));
   this.subs.push(this.service.Subject2.subscribe(() => {}));
}

ngOnDestroy() {
   subs.forEach(sub => sub.unsubscribe());
}

3rd method:

private subscriptions = new Subscription();

ngOnInit() {
   this.subscriptions.add(this.service.Subject1.subscribe(() => {}));
   this.subscriptions.add(this.service.Subject2.subscribe(() => {}));
}

ngOnDestroy() {
   this.subscriptions.unsubscribe();
}

4th method:

ngUnsubscribe = new Subject();

ngOnInit() {
   this.service.Subject1.pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(() => {});
   this.service.Subject2.pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(() => {});
}

ngOnDestroy() {
   this.ngUnsubscribe.next();
   this.ngUnsubscribe.complete();
}

4. Track by function

*ngFor="let item of items; trackBy: trackByFn"

trackBy is a parameter that accepts a function that should return a unique value of each item of the list. Without using trackBy function, *ngFor will re-render each and every element of the list every time that list changes (each element will be removed from DOM and rendered once again). With trackBy function, only the values that have been changed will be re-rendered or deleted.

5. Webpack Bundle Analyzer

If you find out that your bundle’s size is too big, you can check what exactly is in the bundle and decide whether you need all the external libraries or not. You can use e.g. Webpack Bundle Analyzer. All you need to do is just provide a simple configuration based on your application and your needs, and analyze the output graph.

6. You probably don’t need external libraries

After generating a graph via Webpack Bundle Analyzer you probably know that you shouldn’t add the whole library to your project if you use only a small feature from it. Try to code the same function that you import from the library on your own. For example, a concat method from Lodash

import { concat } from 'lodash'
concat([1], 2, [3], [[4]])

is nothing more than

[1].concat(2, [3], [[4]])

The more code you write on your own, the bigger control and understanding of how it works you have. Moreover, it’s easier to debug and maintain the code without unnecessary external libraries. However, if you need to import something, choose modular library and

import { chunk } from “lodash”

instead of

import * from “lodash”

7. Styles per component

No matter if you use SASS, LESS or pure CSS (is there anybody who still uses pure CSS? 😉) try to write as many styles per component as you can, instead of global ones. In the files with global styles declare variables with colors, fonts, reusable components, like buttons, dropdowns, form inputs, but keep everything else divided into components. Properties will be loaded only if the component is used in the rendered page, so it means better performance for the application. For you, as a front-end developer, it means that the SCSS is scoped and simplified, so you will be probably more productive during development.

8. Tree shaking

You can imagine that the application is a tree with green and brown leaves that refer respectively to used and unused parts of the code. When you try to shake that tree, the brown leaves (dead code) will fall down. When using ng build --prod to build, the Angular CLI will compile and bundle all components into the application. When using ng build --prod --build-optimizer to build, all of the unused components will be omitted. --build-optimizer activates tree shaking (a term commonly used for dead-code elimination in JavaScript context) on Webpack. Unfortunately, this can cause some bugs, so be really careful while doing that and rather than excluding dead code, try including living code.

9. One-time string initialization

While binding properties between components check if:
• the target property accepts a string value,
• the string is a fixed value that you can put directly into the template,
• this initial value never changes.
[Source: Angular.io]

If if the property covers all of these criteria omit the brackets and use

label="Save"

instead of

[label]=”’Save’”

This way the Change Detector will not check it while running in the component.

10. Dependencies between components

The next thing to consider are dependencies between components in the application. Are all of them really necessary? Do you want and need them all? Try to check it by generating and analyzing dependencies graph (for example NGD: Angular Dependencies Graph).

It can be also helpful when you start working on an already existing project and want to have an overview of the architecture of the application.

11. CSS vs. JS animations

Remember to use the appropriate animations, depending on what you want to achieve. CSS animations are perfect for smaller, self-contained states for UI elements, e.g. a sidebar with menu appearing from the side, a tooltip showing on hover, while JavaScript gives more control over animations, e.g. possibility to stop, slow down, reverse or pause the animation. CSS animations are smaller so use them every time you can, and only when they are not enough for you, choose JS ones. A good practice is to use a CSS animation to make a global loader for the application - then, even if the JavaScript of the application doesn’t load properly, the user can see a nice, animated loader.

12. Lazy loading

Lazy loading loads only those modules and components that are necessary. If the user is not an admin, there is no need to load the entire AdminModule, and if the user is not signed into the application and uses it anonymously, there is no need to load the AccountModule, which allows to view and edit the profile.

const routes: Routes = [
          { path: 'account',
          loadChildren: () => import('./account/account.module')
          .then(m => m.AccountModule) },
          { path: admin,
          loadChildren: () => import('./admin/admin.module')
          .then(m => m.AdminModule) }
];

What's more, you can try lazy load for a bigger amount of images or longer content - load it on scroll.

13. Throw it away to the backend

Move as much application logic as possible to the backend. When the logic of the application relies little on the choices of the user, there is no need to perform huge calculations on the frontend side.

We hope these tips will help you with your next Angular project. If you have anything to add, feel free to share your thoughts in the comments!

You may be also interested in:

➤ CSS tips and tricks for text-based content
➤ 8 useful Chrome extensions for front-end developers
➤ The most important skills you need to be a good front-end developer

11 extremely useful Git commands every developer should know

Thu, 05 Dec 2019 15:25:55 Z

Git is a free and open-source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

To take advantage of this speed and efficiency you should learn some useful commands. In this blogpost, I'd like to share with you some of the most interesting Git commands - and my personal favorites. Let's explore them!

1. git stash -u

You may have used git stash command (this command takes modified files in your working directory and saves them in a separate place) and you may have been annoyed that the new files were not stashed. By using -u option you can move your new files to the stash.

2. git filter-branch --force --index-filter \
'git rm --cached --ignore-unmatch Filename' \
--prune-empty --tag-name-filter cat -- --all

Have you ever discovered that there's a big unnecessary file in your repository? You could just remove it from your local directory and push that change to the remote. However, there is one problem with this approach: the file still exists in the repository history. Good news - it's possible to remove such file permanently! See here for details.

3. git add --renormalize

Have you ever heard of the wall of pink? It is a situation when someone commited a small change to your repository, but all the files in this change have all the lines changed. In GUI tool, you may see all the lines pink (removed) and right below all the lines green (added). But how did it happen? The answer to this problem may be different line endings (CR LF vs LF). Read more about it here and here.

4. git log --graph --decorate --abbrev-commit --all --format=format:"%C(magenta)%h%n%C(green)%t%n%C(yellow)%an%n%C(red)%ae%n%C(blue)%ad%n%C(cyan)%s"

Did you know that you can customize git log appearance? Read more about possible formatting options here.

5. git shortlog -s -n --all --no-merges

This command will show how many commits you and your teammates pushed to the repository.

6. git push --force-with-lease

More polite version of git push --force. Remote branch won't be overwritten if someone pushed some changes to it.

7. git branch --merged | egrep -v "(^\*|master|dev)" | xargs git branch -d

Delete branches that were merged to current branch, except for branches excluded in the filter (master and dev in this example).

8. git reflog

Using this command, you can find a log of what you did in the repository. You can use it for example to restore a commit from a branch that was deleted.

9. git commit --amend --no-edit

If you forgot to commit one extra change, you can use this command to edit your commit. Use it only if you did not push your commit!

10. git-bisect

Imagine that you find a bug in the current version, and you know that this feature worked in some old commit. There are probably dozens of commits between the current version with the bug and the working one. If you have trouble with identifying what part of code and what commit is responsible for that bug, you can use git-bisect to identify the root cause of the issue. You start by marking two commits as bad and good, and use git-bisect to perform binary search in the repository history. More details can be found in the documentation.

11. git grep

You probably know that you can search your working directory with grep function. Did you know you can do the same in the repository history? If you remember some part of code that was deleted and you need it now, use git grep. Usage is similar to grep function. Find out more here.

I hope you find these commands useful and they will make your daily work more efficient. If you want to learn more about Git and how it works, I highly recommend you this awesome presentation: Deep Dive into Git by Edward Thomson.

Feel free to share your favorite Git commands in the comments!

MotionLayout + Android Studio 4.0 = ❤

Fri, 15 Nov 2019 14:21:28 Z

MotionLayout is out there since the release of constraint-layout:2.0.0-alpha1 (June 2018), and it has already caused quite a stir. When we first saw the example animations that can be done pretty easily using it, we were pretty impressed. However, as it turned out, using MotionLayout was time- and work-consuming, because there was a lot of code to write, and in order to test it we had to run our app on the device each time.

These times are over!

As for constraint-layout:2.0.0-beta3 and Android Studio 4.0 Canary1 we can edit MotionLayout in the graphic design tool, and what’s even better, we can preview the effects of our work right in the Android Studio, with no need to run the app on the device ❤

That sounds really awesome. Now, let’s see how it works.

A simple MotionLayout with changing position, color, rotation, and size of the view.

MotionLayout

At the beginning, just a few words about the MotionLayout itself.

MotionLayout class extends ConstraintLayout. That means you can seamlessly convert the latter to the first, and without any changes, it should work pretty much the same. That is really nice, because it enables us to experiment with MotionLayout, starting with any existing ConstraintLayout.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/sky"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/sky_morning"
        app:layout_constraintBottom_toTopOf="@id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/ground"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/ground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/guideline" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <ImageView
        android:id="@+id/biker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/biker"
        android:src="@drawable/ic_bike"
        app:layout_constraintBottom_toBottomOf="@id/guideline"
        app:layout_constraintTop_toTopOf="@id/guideline" />

</androidx.constraintlayout.widget.ConstraintLayout>

Above: just a simple constraint layout that will be our starting point.

The real magic of MotionLayout lays in the MotionScene resource file, which contains all the constraints and attributes transitions that result in our layout animation.

<?xml version="1.0" encoding="utf-8"?>
<MotionScene 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
       <KeyFrameSet>
       </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/start">
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
    </ConstraintSet>
</MotionScene>

Above: an empty MotionScene file.

Each Transition has to have a start and end ConstraintSet, and a number of KeyFrames that enables us to achieve various interesting effects. You should remember, that constraints set in the MotionScene always take precedence over these declared in the MotionLayout file.

If you want to know more about the MotionLayout itself, there is a great series of articles on the Google Developers Medium.

To use all the discussed below features you need to add a dependency to your build.gradle file.

dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta3'
}

MotionEditor

Ok, so now that we know what MotionLayout is, let’s see what Android Studio 4.0 can do to make our work with it more enjoyable.

First of all, in the layout design panel there is a tool to automatically convert our selected ConstraintLayout to the MotionLayout.

What it really does is changing the root layout to MotionLayout, creating a new MotionScene xml file in the resources/xml package and setting the app:layoutDescription attribute of the new layout to the motion scene file. That’s it. But is also redirects us to the brand new MotionEditor view.

There you can see a preview of our MotionLayout on the left, a panel with all the transitions and constraint sets in the middle, and attributes panel on the right.

One thing to remember is that you can navigate between code, design, and split the screen using the three buttons on the top right corner of the view (not on the bottom left as it was before).

Now, by navigating between the start and end states in the middle panel, we are able to add/change views constraints and attributes. E.g. we want the color of the sky to change from light to dark. All we need to do is to choose start state, click on sky entry and add a new Custom Attribute (there is an autocomplete in the attributes popups ☺). Then repeat it for the end state.

MotionLayout will do the rest for us, and we get a nice simple sky animation.

In a similar way, but by changing the start and end constraints of the biker image, we are able to create a changing position animation.

By clicking on the grey arrow between the states, you open the Transition panel where you can play the current motion animation.

To make it work on the device we need to start the motion somehow. We can either start/set the progress in code, or add an OnSwipe/OnClick MotionObject. In this example, we choose the second option, and by clicking the third button on top of the motion panel we add a SwipeHandler with an anchor at the biker.

Now let’s add some sunshine to our animation ☺

We add the sun image, and want it to move above the biker, but on the arc, so simply changing the constrains won’t be sufficient. We need to add also a KeyFrame. We can do it by choosing KeyPosition from the Transition panel, and setting the percentY position in a 50th frame (frames go from 0 to 100) to a negative value, and type do pathRelative.

Now our animation starts to gain some life.

In a similar way, but using KeyAttribute we can modify things like scale, rotation or alpha of our view.

Let’s get nuts and add all of the above attributes! Making the sun do a 360 degrees rotation during the animation, scaling to 1.5 in the middle, and vanishing after the 60th frame.

When we add a moon image with the same path as the sun image, and with alpha increasing after 60th, we’ll get a really nice transition.

Here, I added also a backgroundColor frame for sky at the 60th frame.

Now you can use your imagination and add other views to the animation. Will you be able to recreate the one from below? ☺

This kind of animation is a great example of how MotionLayout can be mixed with a ViewPager for creating a really nice custom experience.

You can find the complete code of the example HERE.

It is also worth to mention that if you have a MotionLayout written with an older constraint-layout version and older Android Studio, you can still use it with the Android Studio 4.0, and MotionEditor will work just fine, no changes need to be done ✔

Problems

The tools that Android Studio 4.0 gives us to work with the MotionLayout are great, however we must remember that neither of them is stable yet, and definitely not production-ready. There still can occur some random crashes and other errors.

Here are some problems I encountered while playing with the above example:
• modifying constraints can sometimes cause big lags
• there must be no errors or warnings (!) in your xml code for MotionEditor to work
• ‘showPaths’ option does not work when there are many views in the layout
• MotionEditor does not work for your custom classes extending MotionLayout

Conclusion

Now it’s time for your own experiments. MotionLayout gives us great abilities to create beautiful and meaningful animations. There are many other features that I haven’t discussed here, like multiple transitions in a single MotionScene, creating custom attributes, using MotionLayout progress, KeyCycles, or motion easing.

The best place to start your adventure is definitely the documentation page, where you can find many examples.

If you have any questions regarding the article, or want to share your MotionLayout animations, feel free to leave a comment!

About the Author
Aleksandra Krzemień has profound experience in building all sorts of mobile apps, including those connected with external devices. She is a natural mentor and loves to share her knowledge. Throughout her career, she has been actively engaged in many mentoring programs and IT-related organizations, such as Women in Technology or Google Developers Group. She likes to spend her free time singing and playing board games.

8 useful Chrome extensions for front-end developers - and a bonus

Thu, 01 Aug 2019 12:15:05 Z

We believe that the list will serve both experienced coders and beginners. Seniors can use it as an inspiration to refresh their toolbox. And as for juniors - we can't promise that the listed tools will make you a front-end superstar instantly, but we're quite sure they'll be helpful on the way!

Quick JavaScript Switcher

This one allows you to disable or enable JavaScript on the fly by hostname and subdomain. It's really useful when you want to check how your page will look like when there's an error and your JavaScript code doesn't load properly. The reason isn't always an error though — there are some people who reportedly use this plugin as a default setting, in order to improve the speed of their browser. So as a front-end developer, you can test your work for such cases as well and make sure all the content is readable.

Dimensions, Page Ruler

Dimensions is a very useful extension when you want to make a pixel-perfect website - and you should always aim at making a pixel-perfect website! With this plugin, you can simply measure all the sizes and distances between elements, such as the sizes of inputs or the distances between images. Page Ruler works the same way as Dimensions but you can select your own area to measure and check how big it is.

PerfectPixel

Speaking of pixel-perfect websites... Have you ever heard from a designer that your page isn't exactly the same as his design? With this extension you can prove him wrong! PerfectPixel allows you to add a semi-transparent overlay with the design and check if there are any differences. And surely there are none!

Window Resizer

Window Resizer can improve the way you test your website's layout on different devices. You can save presets with dimensions you most often need and simply change your browser's window size. It also allows you to swipe the orientation of the device from horizontal to vertical to emulate the behavior of smartphones.

React Developer Tools

This extension allows you to inspect hierarchies of components in your React application. It works only for React and you can find it as a new tab in DevTools (called React). You can also check the props and state of the selected component. The really good thing is that if you select any element in the Elements tab in DevTools it will be also selected in the React tab, so you don't have to waste time to look for it twice.

What font?

The name speaks for itself in this case! With What font you can identify the font used on the page without checking it in DevTools. You can also see other details: size, line height, style, weight and color of a selected text. Saves lots of time!

ColorZilla

The end of the color struggle! With ColorZilla you can check every color on your website and get its hex number using simple picker. Besides, there's complete information about class, id, tag name and size of the selected element. The extension also includes a link to the CSS gradient generator and the history of recently picked colors.

Bonus! How to enable dark theme for DevTools?

Do you enjoy using dark theme for macOS system or your code editor? You can easily have it the same way in the Chrome browser DevTools. This time there's no extension needed - you can quickly enable it in the Settings. Here's a step by step guide. Make your working environment classy!

Anything to add? Feel free to share your suggestions in the comments!

Couchbase Lite Android migration from 1.4 to 2.x

Thu, 23 May 2019 07:12:52 Z

Couchbase Lite is out there for a while, but recently, with an update to version 2.0, it went through a big redesign. In this article, we’d like to point out some differences between versions 1.4 and 2.0, and help you with migrating your code.

[Note: this article does not cover migrating your data replication code.]

All examples you’ll see in this article are based on the official sample Android Couchbase Lite Todo app.

Internal database format

Couchbase Lite is a document database that stores data in JSON documents, however internally it uses an SQLite database. We will look into this database a few times in this article. The first two tables we’re interested in are docs and revs. The first one contains a list of all documents internal ids, and the ids you gave them:

The second table contains info about all documents current revisions:

Up to version 1.4 Couchbase Lite was using a map-reduce approach, which bases on creating views (which work more or less like SQL indexes). It requires you to create a map (and optional reduce) function, which given a JSON document input emits a number of key-value pairs to be indexed in the view. In code it would look like this:

val view = db.getView("list/listByName")
view.setMap({ document, emitter ->
               if (document["type"] == "task-list") {
                   emitter.emit(document["name"], null)
               }
           }, "1")

Executing this code will result in inserting a new row in the internal database in views table:

and creating a new table maps_1 which will include all emitted values. In this case:

A new table maps_x will be created for every view.

The first thing that changed in 2.0 version is the format of the internal SQLite database. Now the table we’re interested in is named kv_default.

It contains all the info about the documents, but JSON body is stored in a binary form, so we’re no longer able to read it! The only way to read the data is to use an official cblite tool. More info about the new db schema can be found here.

The important thing is that if in your app you have a database in version 1.4, when you update the library version in your code, your database will be automatically updated to the new format on the first open.

Database creation

After changing your gradle dependency from implementation "com.couchbase.lite:couchbase-lite-android:1.4.*" to implementation "com.couchbase.lite:couchbase-lite-android:2.0.0" and compiling the project, your code will light up with dozens of error messages. Let’s try to fix some of them step by step.

First things first. In 1.4 to create and open your database you probably used code like this:

val manager = Manager(AndroidContext(context.applicationContext), Manager.DEFAULT_OPTIONS)
database = manager.getExistingDatabase("dbName")
if (database == null) {
   ZipUtils.unzip(context.assets.open("dbName.zip"), context.filesDir)
   database = manager.getDatabase("dbName")
}

If you needed to have a preloaded database, you stored it in a zip file in assets and then unzipped it using ZipUtils, which was a utility class from the couchbase-lite library. Now you need to change it to

val config = DatabaseConfiguration(context.applicationContext)
if (!Database.exists("dbName", context.filesDir)) {
   ZipUtils.unzip(context.assets.open("dbName.zip"), context.filesDir)
}
database = Database("dbName", config)

and remember that ZipUtils class is no longer included in the library, so you need to write your own (or copy the old implementation from here).

CRUD operations

As in the 2.0 version Couchbase Lite changed data manipulation approach from map-reduce to N1QL-based Query API, the CRUD operations changed a lot. Say goodbye to getView() methods, and say hello to QueryBuilder.

Creating a single document didn’t change that much. From

val docId = username + "." + UUID.randomUUID()
val data = mapOf("type" to "task-list", "name" to title, "owner" to username)
val document = Document(db, docId)
document.putProperties(data)

we get to

val docId = username + "." + UUID.randomUUID()
val data = mapOf("type" to "task-list", "name" to title, "owner" to username)
val mDoc = MutableDocument(docId, data)
db.save(mDoc)

Updating existing document looks pretty much the same. You just need to set an existing document id. To create a MutableDocument from Document just call document.toMutable().

Reading a single document also looks the same

val document = db.getDocument(mDoc.id)

but to get the properties from the document instead of calling document.properties you need to call document.toMap().

Deleting a single document goes from

document.delete() or document.purge()

db.delete(document) or db.purge()

The real fun begins when we need to create a query to the database. Instead of calling db.getView(viewName).createQuery(), we build our query step by step using QueryBuilder.

Before:

val query = db.getView("list/listByName").createQuery() 
query.isDescending = false
query.limit = limit

query.run().forEach { result ->
   val doc = result.document /* we can get document or properties */
   /* mapping and other stuff */
}

After:

val query = QueryBuilder.select(SelectResult.expression(Meta.id),
                               SelectResult.all())
       .from(DataSource.database(db))
       .where(Expression.property("type").equalTo(Expression.string("task-list")))
       .orderBy(Ordering.property("name").ascending())
       .limit(Expression.intValue(limit))


query.execute().forEach { result ->
   val properties = result.toMap() /* we cannot access the document itself */
   /* mapping and other stuff */
}

This may seem longer at first sight, but remember that in the first example we omitted creating the view.

The semantics of the query builder is really easy to understand, as it reminds good old SQL SELECT * FROM table_name WHERE id=id_number ORDER BY name ASC LIMIT limit.

However, there are a few things that need to be pointed out.

In select() method you’d probably use mostly these three expressions:

• SelectResult.expression(Meta.id) - which will result in returning document id (key from the database, not the id inside your JSON, if you have one) under the name id.

• SelectResult.all() - which will result in returning entire JSON document in a form of a Dictionary under the name of your database.

• SelectResult.property("name") - which will result in returning a property name from your JSON document.

Of course you can build more complex expressions using comparators like Expression.greaterThan() or functions like Function.count() etc.

Where expressions can be chained using operators like Expression.and() or Expression.or(). You can also chain QueryBuilder with join() or groupBy() components.

For example, the above query will result in a structure like this:

[
  {
         "id": "todo.123",
         "todo": {
               "name": "Groceries",
               "owner": "todo",
               "type": "task-list"
         }
  }
]

One more confusing thing is how Couchbase Lite handles numbers now. If you want to maintain a Double field, it can be serialized (and as a result deserialized) to different data types. If the decimal part is zero, it will be deserialized as Long. If a number fits in the Float type, it will be deserialized asFloat. Therefore, if you need a Double, it would be best to read it from the document map as Number and then call toDouble().

You also should note that there are no more options to run multiple operations in the transaction. Instead, you can use db.inBatch() - although it works a bit differently.

The last thing you need to take into account is that for today (May 2019) Couchbase Lite versions 2.x do not support devices with architecture x86_64. That means they won’t work on these devices, but it also means that you will not be able to write a unit test using eg. Robolectric to test your db code. Instrumentation test, however, will work fine.

Now, hopefully, you will be able to migrate your database and CRUD operations from Couchbase Lite 1.4 to 2.0. For other examples and features you can look in the official documentation and dive into some official tutorials.

We hope you find this article useful, and as always: if you have any comments, feel free to let us know!

Black holes and algorithms. How computer science helped us see a black hole for the first time

Thu, 09 May 2019 08:09:05 Z

Its image was not created like an ordinary image. In some articles, you may find misleading headlines saying it's a photo of a black hole. If you think that people zoomed in an image from one of the telescopes, then you couldn't be further from the truth. To create this image large amount of observation data was collected from several telescopes performing parallel observations. Next, all the data were combined and used to reconstruct the image that we saw in the news. In this post, I will describe this process, showing the role of image processing algorithms in this experiment.

This post was written based on the article "First M87 Event Horizon Telescope Results. IV. Imaging the Central Supermassive Black Hole". We only scratched the surface here, so if you want to go into depth you should read this paper (see sources at the end).

What is a black hole?

To fully appreciate this result we should remind ourselves what a black hole is exactly. A black hole is a region of space within which gravity pulls so much that nothing, not even light, can escape. This implies that black cannot be seen directly, though we can see gravity effects near the black hole. Strong gravity is a result of squeezing huge mass into a tiny space. To become a black hole, a star has to be massive (at least 20 times heavier than the Sun). There is a formula for calculating the radius of the created black hole. If hypothetically the Sun became a black hole, its radius would be reduced to 3 km.

In 1916, Einstein completed his work where he described the general relativity theory. He characterized gravity using geometric concepts - geometric theory of gravitation. Einstein proposed that spacetime is curved around heavy objects. One of the consequences of Einstein's theory is that the time isn't the same in every place of the universe. One of the real-world application is the calculation of coordinates by navigation devices that communicate with GPS satellites. Amendment resulting from general relativity theory is crucial to obtain a precise result for coordinates calculations. If you want to explore black hole concepts further, I recommend you to watch this video - it's originally in Polish, but you can turn on English subtitles:

Observation description

To observe such distant object scientists came up with the idea of combining data from several telescopes distributed around the Earth. This array of telescopes is called the Event Horizon Telescope (EHT). Here is a list of all facilities that collaborated in the black hole observations:

the phased Atacama Large Millimeter/submillimeter Array (ALMA),
Atacama Pathfinder Experiment telescope (APEX) in the Atacama Desert in Chile,
the James Clerk Maxwell Telescope (JCMT),
the phased Submillimeter Array (SMA) on Maunakea in Hawai'i,
the Arizona Radio Observatory Sub-Millimeter Telescope (SMT) on Mt. Graham in Arizona,
the IRAM 30 m (PV) telescope on Pico Veleta in Spain,
the Large Millimeter Telescope Alfonso Serrano (LMT) on Sierra Negra in Mexico,
the South Pole Telescope (SPT).

Photo via IOPscience

The biggest advantage of this virtual telescope is that its diameter is equal to the longest distance between the telescopes in array, i.e. distance between Spain and the South Pole. The biggest challenge is different weather conditions around the globe that could prevent you from gathering data from all places. EHT team decided that the best dates for observation were April 5, 6, 10, and 11 in 2017. On these days different target observations interleaved with black hole observation and results were later used for comparison. The number of scans on individual days is 18, 25, 7 and 22. A single scan is an observation between 4 and 7 minutes. Here is a picture in which you can see coverage for EHT observations of M87.

Photo via IOPscience

If the EHT team put telescopes all around the Earth, they would record data for every point, and then it would be relatively easy to make an image using known image processing algorithms, e.g. Fourier transformation. But since they only have telescopes at several places they only get a scarce number of measurements. Earth rotation helped us to expand observation coverage. Team working at each facility recorded petabytes of data. At some point, all this data had to be transported to one location. Sending it over the Internet network would take longer than moving it physically. Then the data analysis could begin.

How computer science was applied to generate the image?

Due to a limited set of samples in the visibility domain, we cannot reconstruct the image accurately. The team had to enforce constraints that were not implied by the measurements. That's how you may see different images that were reconstructed at different steps.

In the first step, the team worked on correlating data from observation and replacing a weak signal by a stronger one hidden in that correlated data. This reduced data size from petabytes to terabytes. Observed data can be expressed by convolution formula f = g * h. In other words, we know that observed image f is equal to actual image g convoluted with factors that deformed observed image h, i.e. f = g * h, where f, g, h are functions and * stands for convolution. Factors that deformed black hole observed data are mainly caused by the atmosphere (different weather conditions among observatories) and calibration errors. We know f, more or less h and we have to solve this equation for g.

In the second step, four teams were formed and they worked independently using different algorithms to produce the black hole image. Imaging algorithms can be generally divided into two categories: forward modeling and inverse modeling. In forward modeling, you take the current state of some object and you run your algorithm to see how your object changes in the future. Inverse modeling is the opposite of forward modeling, i.e. your model is in some state and you want to calculate what state can produce the initial state. The team used algorithms based on CLEAN for inverse modeling and RML - regularized maximum likelihood for forward modeling. Both are image reconstruction techniques that reverse the result effects of convolution on observed data. To learn more about these algorithms you can see this website. Here is a comparison of the images reconstructed by each team:

Photo via IOPscience

In the third step, the team worked on choosing imaging parameters that produce in some sense the best picture. Among other things they tested different parameter values for synthetic images and restored images using those parameters. They selected geometric models that are similar to those observed in M87, e.g. ring, crescent, disk. See the image below for comparison of different algorithms that were run with the best-selected parameters. The last step was the final image validation. The team performed additional tests to assess the reliability of the created image.

Photo via IOPscience

Summary

This procedure took almost two years to complete it. The final image is a result of a joint effort of more than 200 researchers!

If you want to see the black hole image in original size 7416 x 4320 px, follow this link. In the future, we can expect more detailed images as more telescopes are added to EHT array. Perhaps space telescopes could be used to enhance this image and maybe record video. The future is going to be exciting!

Sources:
1. The Event Horizon Telescope Collaboration et al 2019 ApJL 875 L4
2. Katie Bouman - Imaging a Black Hole with the Event Horizon Telescope

About the Author
Marcin Zarębski is an experienced back-end developer, specializing in. .NET platform. He never ceases to amaze us with his skills in building complex backend solutions and infrastructure. Marcin is also interested in space exploration and the role of computer science in it. He likes to spend his free time in the mountains or playing board games.

Using SignalR to create real-time mobile app

Wed, 21 Nov 2018 10:28:27 Z

Let's imagine an app helping friends locate themselves. Every minute the app collects the current user location and sends it to the server, which resends this location to other connected users. In this blog post, we will show you how to setup SingalR on both server-side and mobile app.

What is SignalR?

SignalR is a .NET library to create real-time applications. Opposite to regular HTTP communication, SignalR allows pushing messages from server-side to connected clients without any previous request. Thanks to bi-directional communication the mobile app does not have to ask the server to be up to date with the server content.

SignalR frees developer of selecting transport type, by selecting the best available transport given by client and server side. Websockets are not supported by the server? No problem, let's talk with Long Pooling, or Server Sent Events. SignalR provides an API that makes selected transport transparent.

Setup SignalR server

All SignalR server-side code is contained in a Hub which contains methods that can be called similarly to MVC Controllers. To be able to use those fully one need to register it in Startup.Configure as follows:

app.UseSignalR(route =>
{
    route.MapHub<SomeFancyNameHub>("/FancyHub");
});

Due to inheritance from SignalR Hub SomeFancyNameHub: Hub you already have access to Context, Clients and Groups properties.

 public abstract class Hub : IDisposable
    {
        protected Hub();

        public IHubCallerClients Clients { get; set; }
        public HubCallerContext Context { get; set; }
        public IGroupManager Groups { get; set; }

        public void Dispose();
        public virtual Task OnConnectedAsync();
        public virtual Task OnDisconnectedAsync(Exception exception);
        protected virtual void Dispose(bool disposing);
    }

This means for example that by overriding OnConnectedAsync() method for each connected client you can get it's connectionId from Context.ConnectionId, put it in one of the group from Groups using Groups.AddToGroupAsync() and notify all other Clients that a new one just joined the ~~club~~ Hub! From now till the hub is disposed server can access all those connections and notify clients whenever there is a need. The only thing that limits you is your

In our case, there is a mobile app that displays team member location on a map. The teams are defined earlier so backend knows how many members there are, which ones are active and while they are, what is their location. Hub starts when first team member joins and based on his team name he is already grouped with.

Groups.AddToGroupAsync(Context.ConnectionId, usersTeamName);

From now on all team members joining will be assigned to this group. And when they do, those methods would be invoked:

await Clients.Caller.SendAsync("TeamJoined", JsonConvert.SerializeObject(teammates));

await Clients.OthersInGroup(usersTeamName).SendAsync("TeammateJoined", JsonConvert.SerializeObject(teammember));

where TeamMates is a collection of TeamMembers and TeamJoined along with TeammateJoined are messages/methods our iOS client listenes to.

So when a new team member joins the group, his name, profile picture and location is sent to other team members. This gives us the possibility to draw his avatar on a map in a precise location so his teammates could know where he currently is. At the same time, the team member gets the same info about his mates to draw on his map.

To keep hub alive and to stop it from being disposed each team member sends its location once in a while. This updated location is then being sent to other teammates so the map could refresh.

Thanks to SignalR hub we can have as many Groups as we like and keep the communication flow within that group (or team in our case).

Setup SignalR iOS client

To setup iOS client we will use mooozyk/SignalR-Client-Swift github repository.

Let's begin with initialization of Hub instance. In order to do that use HubConnectionBuilder class.

let hubConnection = HubConnectionBuilder(url: URL(string: "https://angrynerds.pl/stream")!).build()

HubConnectionBuilder allows us to customize connection options, by setting custom HTTP headers, or append authorization token.

let hubConnection = HubConnectionBuilder(url: URL(string: "https://angrynerds.pl/stream")!)
    .withHttpConnectionOptions { options in
        options.headers = ["foo": "bar"]
        options.accessTokenProvider = {
            return userProvider.token
        }
}.build()

After invoking build() method we are ready to begin conversation with the server. To start connection call start() on HubConnection object.

SignalR API provides 2 basic methods to communicate - one to send the message, and the other to listen to any.

In our example, we will notify the server about the current user location. To do it, we need to call invoke(method: String, arguments: [Any?], invocationDidComplete: (Error?) -> Void)

method: String - method server is listening to
arguments: [Any?] - array of objects we want to send
invocationDidComplete: (Error?) -> Void) - completion handler after completed invocation

Like this:

hub.invoke(method: "updateLocation", arguments: [email, latitude, longitude], invocationDidComplete: nil)

To be notified on each player location update we will use hub.on(method: String, callback: ([Any?], TypeConverter) -> Void)

method: String - method server is listening to
callback: ([Any?], TypeConverter) -> Void) - callback method with 2 parameters, arguments and converter object, which helps us decode arguments to desired type

We are expecting json data as the only parameter in the server message. JSON should contain a list of connected users with their current location.

hub.on(method: method.rawValue, callback: { (args, typeConverter) in    
    guard let jsonString = try? typeConverter.convertFromWireType(obj: args[0], targetType: String.self),
      let data = jsonString?.data(using: .utf8),
      let users = try? JSONDecoder().decode([User].self, for: data)
      else { return }
    self.updateUI(with: users)

If we need to be up to date with connection status we can implement HubConnectionDelegate methods.

func connectionDidOpen(hubConnection: HubConnection!)
func connectionDidFailToOpen(error: Error)
func connectionDidClose(error: Error?)

Want to know more about the magic you can do with SignalR? Let us know if there's a specific topic you'd like us to cover!

About the Authors
Łukasz Lech is an iOS developer at Angry Nerds - and one of the main creators of our iconic Cats and Dogs app! He’s a Swift enthusiast and he likes to explore this language’s potential as a backend technology. Łukasz is always up to date with all things Apple and he’s also interested in UX/UI design for mobile apps.

Jakub Tomalski is one of our most experienced .NET developers. As he says himself, he is fascinated by the power of API, so backend was the only career path he could choose! He specializes in backend development for mobile apps, but he has also hands-on experience working with web solutions.

Blog

How Can Custom Mobile Development Affect Your Business’s Growth?

Firstly, what does custom development mean?

Core benefits of developing a custom application

1. Scalability

2. A real representation of your brand’s identity

3. Building a connection with your users

4. Maintenance and control of the development process

How to create a successful custom mobile app?

Find the right team

Follow the latest trends and customer demand

Specify the message that you want to convey through your app

How to quickly write and run Kotlin script - practical guide

Setup

Script

Arguments

Reviewing GitHub Copilot Reviews - Is AI Pair Programming Worthwhile?

GitHub Copilot’s Limitations 🤖

Expert reviews of Copilot and AI pair programming 💬

“Feels quite magical to use” 🔮

“It's not gonna take our jobs anytime soon” 🙅‍♀️

”Productivity boost that will most likely create more jobs” 💪

Decent assistant, long way from replacement 🚧

CSS tips and tricks for text-based content

Selectors

Counters

Shape-outside

Line-clamp

::selection

Hope you enjoyed these CSS tips and tricks! We encourage you to try them out and see for yourself how they can make your work easier and more enjoyable. Let us know if you have any questions or want to share your thoughts!

Happy styling 🎨

You may be also interested in:

Chain of Responsibility design pattern – with examples

Let's learn more about the Chain of Responsibility with some practical examples

Chain of Responsibility vs other patterns

Chain of Responsibility vs Decorator

Chain of Responsibility vs Strategy

What next?

Feel free to share your thoughts or questions in the comments!

You may be also interested in:

Avoiding Anemic Domain Model

Value objects

Refactor CompanyService

Potential problems

Where to go next?

If you have any questions, feel free to leave us a comment!

Master your git log with Conventional Commits in 6 steps

Introduction

1. Semantic Versioning

2. Conventional Commits

3. Lint commit messages

4. Conventional Changelog

5. npm version

6. .npmrc

Summary

Don’t be afraid to commit – and enjoy the coding!

How to optimize an Angular app. 13 tips for front-end developers

1. Code minification

2. OnPush Change Detection

3. Pure pipes instead of functions/getters in templates

4. Async pipe

5. Unsubscribing

4. Track by function

5. Webpack Bundle Analyzer

6. You probably don’t need external libraries

7. Styles per component

8. Tree shaking

9. One-time string initialization

10. Dependencies between components

11. CSS vs. JS animations

12. Lazy loading

13. Throw it away to the backend

We hope these tips will help you with your next Angular project. If you have anything to add, feel free to share your thoughts in the comments!

You may be also interested in:

11 extremely useful Git commands every developer should know

1. git stash -u

2. git filter-branch --force --index-filter \ 'git rm --cached --ignore-unmatch Filename' \ --prune-empty --tag-name-filter cat -- --all

3. git add --renormalize

4. git log --graph --decorate --abbrev-commit --all --format=format:"%C(magenta)%h%n%C(green)%t%n%C(yellow)%an%n%C(red)%ae%n%C(blue)%ad%n%C(cyan)%s"

5. git shortlog -s -n --all --no-merges

2. git filter-branch --force --index-filter \
'git rm --cached --ignore-unmatch Filename' \
--prune-empty --tag-name-filter cat -- --all