DEV Community: ShakuroInc

Web Development Framework Comparison – Django vs. Rails

ShakuroInc — Thu, 30 Mar 2023 09:25:49 +0000

Are you interested in creating a website but unsure of the framework to use? Read about Django and Ruby on Rails, two of the most popular ones. Learn about the similarities between these two frameworks, as well as how they differ from one another.

Web development frameworks offer a wide range of options in the programming world. The choice of the best one frequently depends on the knowledge and experience of the developer. Additionally, it may affect the product’s functionality, resources used, and maintenance costs. Django and Ruby have distinguished themselves as the top options among them. According to a survey conducted by Stackoverflow, 14.2% of the 42,279 developers surveyed use Django, and 7% use Ruby on Rails.

Without a doubt, both languages stand out when it comes to development, community, and usage across the globe; they are well-known for serving as the foundation of any digital product. At the end of this article, you will not only be able to identify the main distinctions between the two frameworks, but you will also be able to select the one that works best for your project.

Django framework: pros and cons

Django is a Python-based web framework that was first introduced in 2005 and is frequently used for Python app development. The fact that it is an all-purpose, open-source, and cost-free framework is what makes it so well-liked in the web development community. That is why developers have high praise for Django’s features.

Django aims to speed up the process of developing web apps by streamlining the entire web development cycle. It provides tools for managing static files in web apps, data validation, caching, logging, pagination, authentication, and more. The language has been around for a little over fifteen years.

Django adheres to the DRY principle used in web and software development, just like fellow industry leader Ruby on Rails. DRY, which stands for “Don’t Repeat Yourself,” is a principle intended to prevent the formulaic repetition typical when creating structures from code.

Examples of the Django framework in action in the real world include data management for streaming services such as Netflix and Spotify, PayPal and JP Morgan in finance, and Google and Mozilla in technology. Instagram, a Facebook-owned social media platform, is one of the most prominent real-world applications of Python.

Web Dashboard Design Concept by Conceptzilla

Pros of Django

- Efficiency and scalability
One of the main reasons Django is so well-liked in tech startups is that the entire point of it is to allow projects to be built and scaled up extremely quickly.

- Documentation
Depending on how you want to approach the language, the creators have divided the documentation into different sections, all of which are incredibly helpful. Whether you need assistance with making your code run quicker, detailed information on the security features of the framework, or instructions on how to create forms in Django.

- Security
Any backend framework handling accounts and data must be able to safeguard its users’ information. Django has a system for user authentication and incorporates HTTPS, Clickjacking, XSS, CSRF, and SQL injection protection. And the best thing about it is that you won’t have to spend any time fiddling with Django’s security features as they are already configured.

- Versatility
This framework’s scalability advantages extend to what you are building as well as to the outside world. Django can handle anything from a content management system to an entire social network. It is adaptable enough to handle complex data analysis or machine learning tasks that you ask it to perform.

- Community assistance
With over sixteen years of existence (half the life of the Python language itself) and such a diverse set of applications, it should come as no surprise that the Django community is thriving.

Cons of Django

- Not a fit for simple projects
Because Django is a high-level framework, it lends itself better to complex features. So if you are trying to get a quick and simple project done, it might not be the ideal framework to use.

- Slow websites
Despite the speed with which you can build things with the Django framework, your website may occasionally run slowly. It’s important to note that this isn’t due to the Python language or Django itself, but rather to the number of resources you’re accessing with the framework. The more databases and other resources you send requests to, the slower the performance becomes.

- Requires a vast knowledge of the language

A problem with this is that Django can be too large at times, requiring you to know the overall structure before you can begin building it. However, because there is guidance and documentation to follow, the wide range of support resources and community can make this easier.

- Lack of conventions
A coding convention is a set of guiding principles to follow when using a web framework—sort of like a rulebook. Django does not, which can turn off some programmers and lead to slower progress at times.

Course Website Design by Jawad

Ruby on Rails framework: pros and cons

Ruby on Rails is a server-side, open-source web app framework written under the MIT License. Rails, as a model-view-controller framework, provides fantastic default structures for databases, web services, and pages. It is thought to be a time-saving method of writing code for developers.

This framework is based on two fundamental principles: DRY (Don’t Repeat Yourself) and Convention Over Configuration. The former eliminates the need to repeat the same coding task, whereas the latter means that the environment you work in, such as systems, libraries, languages, and so on, allows for many logical situations by default. That means you can adapt to them rather than making your own rules each time, making the entire programming process much easier.

Additionally, Rails is used in conjunction with popular front-end frameworks and libraries such as Angular, React, and Vue. And, unlike Ruby on Rails alternatives, it is highly adaptable to changes, allowing developers to experiment with the functionality of created products.

Professional analysts in corporations such as Twitch, GitHub, Airbnb, Shopify, Bloomberg, and Etsy, frequently make sound decisions about the tools they use for their projects. As a result, such tools frequently earn a solid and dependable reputation.

Pros of Ruby

- Model-View-Controller (MVC) architecture-based
A web application in this architecture has three interconnected layers. The model contains code that operates on application data. It centralizes the application’s business logic as well as the data manipulation rules. Users can access data in HTML, PDF, XML, RSS, and other formats. The controller communicates with models and views. It receives a request from the browser, processes it with models, and instructs the viewer on how to correctly display the result to the user.

- Easy to manage changes
The Ruby on Rails framework makes it simple to modify existing code or add new features to the site. Following the site launch, making future changes to your site (for example, making any significant changes to the data model) is simple and quick.

Because of its stability and predictability, this framework is best suited for long-term projects.

- Performance
Rails may slow down applications that require a lot of computation or data handling. If this occurs frequently in your application, have a fresh pair of eyes look at code optimization — this will greatly improve performance outcomes.

There are probably parts of the codebase that are performing slowly, and the tooling and shared experiences that come with the Rails community can help a team address performance issues.

- Cost-effective
The Ruby on Rails framework is completely free and runs on Linux, making it an open-source framework. It’s also simple to work with from a developer’s standpoint. There are numerous gems (plugins) available, which can save a lot of developers time and effort, which is a great advantage of Ruby.

It is simple to create and maintain a website without spending additional money to ensure greater quality, performance, or scalability.

- A sizable community
It ranks among the most used languages on the social coding platform GitHub. Many developers in the community are always working to make their code better and helping others with their projects.

There is a good chance that if you need specific functionality, someone else has already built it or is willing to assist you in resolving any problems. To work with the code, you’ll still need a strong team.

Cons of Ruby

- Time to completion
One source of concern is the slow runtime speed. Other top environments and frameworks, such as Django, are slightly faster than RoR.

Twitter, for example, struggled to improve RoR’s performance, which had deteriorated after the social network gained popularity. Twitter did not completely abandon RoR, but it did have to replace certain internal communication components and server daemons with Scala solutions.

- Boot rate
Boot speed can help developers save time. However, in this case, starting can take a long time depending on the number of gem dependencies and files. This is an area where RoR could improve.

- Lack of versatility
When it comes to basic tasks and features, RoR is virtually unrivaled. However, because there are so many defaults and predefined objects, there isn’t much room for experimentation. So, before you decide on the framework you want to use for a specific project, consider its basic elements and whether they are standard or unique.

- The cost of a blunder
The cost of a mistake in Ruby on Rails development is inextricably linked to performance time. Ruby on Rails will be your best friend if you can be thorough and pay attention to all the small details during development.

However, if you make a mistake early in the development process, it can significantly slow down your entire application, cause problems with the connection between different parts of your software, and result in unintended consequences.

Continuous improvement

It is difficult to place this point in the list of pros and cons of Ruby on Rails and the Ruby language. When something improves, it’s wonderful, and it’s a natural process, especially for a language with such a large and vocal community. However, it can be very difficult to adjust to, particularly for newcomers and beginners.

Furthermore, the overwhelming changes affect not only the framework but also the tools and libraries developed by the community. They not only improve and add new features, but they are constantly developing new ones. To stay up to date on everything, you must be a part of the community at all times.

E-learning Dashboard by Nasim

Django vs. Ruby on Rails: key takeaways

Before you can choose the web application framework that works best for your project, let’s go over some framework comparison elements.

Language

Django is a Python-based web framework, whereas Ruby on Rails is based on the Ruby programming language. While Ruby has a very agile interface, Python language is easier to learn because of its simple syntax.

On the other hand, Ruby was designed with the goal of “enjoying” writing the language. Though the applications created with either of them will look and function nearly identically, the main difference can be found beneath the surface.

Architecture

One thing that both web development frameworks have in common is that they both use MVC (Model-View-Controller). However, in Django, it is referred to as MVT (Model-View-Template). MVC and MVT are similar in most ways and differ only slightly.

The Model in Django represents the database that describes the data structure, and the View is the Regular Expression-based URL Dispatcher that controls what the users should see. Last but not least, Template denotes a web templating system that works in tandem with the Django Template Language (DLT). Django handles the controller part of this.

In RoR, the Model represents database data such as comments, pictures, posts, and so on. ActiveRecord takes care of everything. In this case, the View wraps the data in the HTML template and sends it to the Controller, which is then handled by ActiveView. The ActionController is now in charge of connecting Model and View, handling requests, and sending responses to the web browser.

Online servers

The primary web servers for the Django web framework are Apache, NGINX using WSGI, Gunicorn, and Cherokee. Django uses SQLite, PostgreSQL, MySQL, and Oracle as its database servers.

NGINX, Apache (running the Phusion Passenger Module), and WEBrick are the three main servers used by the Ruby on Rails web framework. PostgreSQL and MySQL are two database servers for Rails.

License

Ruby on Rails is licensed under the BSD License, which is a low-restriction type of license for open-source software that does not impose redistribution requirements. However, Django operates under the MIT license, which grants permissions and indemnifies developers for future use.

User interface

When it comes to the user interface, there aren’t many differences. Django and Ruby on Rails do have some differences, but they are more of a matter of taste than of type. Both have undergone extensive adaptation to meet all free market demands for web development in the twenty-first century.

When it comes to web frameworks, the likelihood is that if you can’t do it with Django or Ruby on Rails, you probably can’t do it at all. Therefore, which one you should choose when it comes to their respective interfaces is more a matter of taste. You should experiment with both to get a sense of them before making a choice.

Application in web development

The principles serve as the glue that binds the entire process of developing an app. Two guiding principles of the Django web framework are noteworthy: DRY (which we have already discussed) and “Explicit is better than Implicit.” This idea enables programmers to create applications that are simple to use and are supported by a large community of users.

Additionally, Ruby on Rails is not short on design principles. Additionally, it makes use of DRY and Convention over Configuration, which promotes the idea that to be productive, you should adhere to conventions rather than make your configurations. This increases effectiveness and speed.

In short, MVPs, eCommerce, web projects, and metaprogramming are the main uses of RoR. The Django framework is designed for creating websites with lots of data as well as ML, Data Science, and AI projects.

Speed and effectiveness

Ruby on Rails performs 0.7% faster when compared to Django performance-wise. The reason for this is that Rails has the benefit of a vast collection of incredible libraries and plugins to increase the speed and ultimately the performance of this framework. However, Django is a fantastic option for a web framework and equally supports quick development cycles.

Stability

Stability and creativity are two complementary factors required for web development. We could pick the one who can handle both well as the winner. Ruby on Rails can balance both because it encourages code reuse to reduce dependencies. Additionally, it employs the Convention over Configuration methodology, which relieves the coders of any additional work.

On the other hand, Python adopts a more traditional strategy by using any tested method to address the issues at hand, offering stability.

E-learning online course website by Rezwan Nahid

How to choose a framework for web development?

Which is better? Django or Ruby? Overall, the top web frameworks in their respective categories, Ruby on Rails and Django, are in fierce competition with one another. However, there are some instances where one prevails over the other.

If your project necessitates the following, use Django:

Managing a large database;
A sizable development team;
AI and machine learning features in modern web apps;
Extremely secure websites.

If your project needs the following, use Ruby on Rails:

Accelerated MVP creation;
E-commerce web apps that are safe and secure;
Scalable and live-updatable websites;
Prototypes are created quickly.

Choosing the best web development framework is a critical task that can have a significant impact on the entire project development process. As you can see, the final answer to the “Ruby on Rails vs. Django” question is largely determined by the project’s specifics, business goals, and expectations. Considering the factors listed above will undoubtedly assist you in determining the best one in terms of functionality and efficiency.

Need a web platform for your project? Contact us to get a versatile product created with the latest technologies and suitable programming languages.

Sidekiq Tutorial & Overview: Is Sidekiq For Ruby Still Worth Working With After 10 Years?

ShakuroInc — Tue, 21 Mar 2023 07:40:09 +0000

Sherlock Holmes needs Dr. Watson. Ruby programming needs Sidekiq. Or Delayed_job, or Resque?

Sometimes our clients are interested in what technologies we are using to build their web application projects. We are happy to share, although it’s not easy to lecture people on technologies and not to be a total bore. So, prepare yourselves, that time of year has come again.

All because Sidekiq, probably the most common background job system for Ruby, just turned 10 years old! This overview will be useful for those who are starting out with Ruby on Rails programming, and those who are picky about their technology stack. We provide tutorials on how to start Sidekiq, schedule and test Sidekiq workers, send emails, and more.

What is Sidekiq?

Bruce Lee against Chuck Norris via Giphy

Sidekiq is a free and open-source Ruby job scheduler that was created by Mike Perham. Ruby programming language is one of our most used and well-mastered tools we respect and love. If you’re interested in why we recommend it for clients’ projects, check out our separate article on Ruby. If you don’t have that spare 10 minutes of your life to get to know our inner development processes (we totally understand), then let’s round it up in 4 sentences and introduce you to the major topic of this article:

Ruby is a programming language.
When developing a Ruby on Rails application, you might find yourself overwhelmed with myriads of tasks that must be executed at the same time.
For example, sending emails, charging credit cards, interacting with external APIs, and other data processing.
Developers use tools like Sidekiq that allow them to run background jobs, i.e., automated processes outside of the request-response cycle so users don’t have to wait in a queue.

So, Sidekiq is a default tool for a Ruby application that improves its performance and response wait time.

Enterprise version

While Sidekiq is free by default, it doesn’t schedule jobs and only executes them. The paid version of the tool — Enterprise version — comes with scheduling. Mark Perham, its creator, didn’t aim to divide the tool into paid and free versions. Rather, this idea came to him accidentally.

Redis

Sidekiq works closely with Redis 4.0+ to organize job queues an d store statistics. Redis (stands for Remote Dictionary Server) is a fast open source in-memory key-value data store. It provides sub-millisecond response times and allows real-time applications to run millions of requests per second.

Workers and queues

The scheduler is run as the copy of the application in a separate process and can be configured to use several worker threads. Each worker is assigned to one or many queues. Queues represent the list of tasks in the order they are added and can be named by purpose (default, mail, reports) or by priority (low, normal, high) — it’s completely up to the developer.

Sidekick 6.3, the latest version of the tool, came out in November 2021. Introducing the new version, Mark Perham elaborates on how to use the term “worker” correctly. What exactly is a worker?

“Are you talking about a process? A thread? A type of job? I encourage developers to stop using the term worker and use include Sidekiq::Job in your job classes” — M.P.

class SomeJob
  include Sidekiq::Job
  sidekiq_options ...

  def perform(*args)
  end
end

Plugins

Sidekiq has a myriad of prominent features: retries with configurable periods, flexible error handling, a web UI and a ton of plugins extending its functionality further.

One of such plugins, for example, introduces repeated tasks on schedules, which were historically solved by tools based on cron. Cron is harder to configure and takes time to start the whole app for execution of a single task.

Another plugin monitors various metrics and checks for Sidekiq to avoid errors. You can find many more on GitHub!

How did Sidekiq get so popular?

Single, married, multi-threading? Image by @dwfries on Medium

In 2012, Mike Perham was the first to introduce a multi-threading background job system. Resque is multi-process and single-thread. Delayed_job can work ‌for single thread processing only. Sidekiq was the first multi-threading tool in the Ruby community. With time, it became the main driver of avoiding thread safety bugs in the Rails ecosystem. Because Sidekiq is omnipresent, it has stabilized the thread safety of Rails.

Who uses Sidekiq?

Sidekiq has become the de facto standard for web applications these days. According to Stackshare, Sidekiq is used by such well-known companies as:

Adidas,
GitLab,
Product Hunt,
Send Grid,
New Relic,
500px,
and many more. A pick into companies using Sidekiq via Stackshare

How does Sidekiq compare to other similar tools?

There are alternative projects with more or less the same set of features. In this article, we compare Sidekiq to its most popular competitors: Resque and Delayed_job.

Resque

Resque is a Ruby library for creating background jobs. You can place them on multiple queues and process them later. Background jobs can be any Ruby class or module. Existing classes can be converted to background jobs. Resque also offers an option to create new classes.

Resque has a slightly different concurrency model from Sidekiq, which may or may not be what you are looking for. While Sidekiq uses threads for its workers (and can’t scale onto many CPU cores), Resque uses processes, which makes it slightly more heavy-weight on one side, but lets it use cores of CPUs. This is important for computationally heavy tasks when the single-CPU threading model doesn’t apply well.

Sidekiq vs Resque statistic on stackshare

Unlike Sidekiq, Resque doesn’t require thread safety and works with any gem (Ruby programs and libraries). According to developers though, Sidekiq runs faster and uses much less memory.

Delayed_job

Delayed_job, a.k.a. DJ is a priority queue, database-oriented tool that allows to execute background tasks asynchronously. It was originally extracted from Shopify and has become very popular through the years.

According to Doug Breaker, who researched DJ in comparison to Sidekiq, there are several features the latter doesn’t have:

Easy integration with Rails that doesn’t depend on a relational database/non-relational database.
Custom data store. You can use the main data store to process tasks offline and customize a data store to fit your needs.
No need to run multiple dependencies at once, e.g., instead of requiring multiple services and dependencies to run a program, you can limit the dependencies that you need. Delayed:job, sadly, doesn’t support multi-threading, unlike Sidekiq. The latter also runs faster, is scalable, and has the ability to run Redis automatically. Sidekiq vs Delayed_job statistic on stackshare

Using Sidekiq in plain Ruby

Now that you know of the alternatives, let’s learn how to use Sidekiq in practice.

Sidekiq is framework-agnostic and can be used in any Ruby application. The official Getting Started guide provides detailed steps on how to get up and running.

The gist is that you:

Add Sidekiq to your Gemfile:

# Gemfile

gem 'sidekiq'

Define worker classes:

# app/workers/generate_report_worker.rb

class GenerateReportWorker
  include Sidekiq::Worker

  def perform(user_id)
    # do your reporting here
  end
end

Start Sidekiq as a separate process:

$ bundle exec sidekiq

Start scheduling your workers:

# Task is to be executed as soon as possible
GenerateReportWorker.perform_async(user.id)

# Task is to be executed in 5 minutes
GenerateReportWorker.perform_in(5 * 60, user.id)

# Task is to be executed at a certain moment (3 hours from now)
GenerateReportWorker.perform_at(Time.now + 10800, user.id

To execute a worker immediately:

MySimpleWorker.new.perform("I was performed!")

Using Sidekiq in Ruby on Rails

There is not much difference between using Sidekiq in plain old Ruby or in Ruby on Rails programming. You still get a nice integration with Rails Active Job framework and you can use Date/Time helpers when scheduling future tasks:

Date/Time helpers examples

# Generate report next Monday
GenerateReportWorker.perform_at(Time.current.next_week, user.id)

E.g., generate a report in 5 minutes:

GenerateReportWorker.perform_in(5.minutes, user.id)

Active Job integration

Active Job is a standard interface for interacting with job runners. According to the official guide, it is a framework with a variety of queuing back-ends. The jobs could be:

Regularly scheduled clean-ups,
Billing charges,
Emails,
Anything you can imagine running in parallel. If you want your workers to not be Sidekiq-specific, you need to take several steps:

Define your workers as ActiveJob jobs:

# app/jobs/generate_report_job.rb

class GenerateReportJob < ActiveJob::Base
  # The name of the queue to put this job into
  queue_as :default

  def perform(user_id)
    # do your reporting here
  end
end

Configure Rails application to use the correct adapter:

# config/application.rb

class Application < Rails::Application
  # ...
  config.active_job.queue_adapter = :sidekiq
end

Use ActiveJob syntax for scheduling:

# Generate report as soon as possible
GenerateReportJob.perform_later(user.id)

There are plenty of configuration options.

Sending emails with ActionMailer and Sidekiq

ActionMailer allows you to send emails (surprise!) from your Ruby app. Here is what you need to send emails asynchronously with Sidekiq:

For creating a mailer:

# app/mailers/users_mailer.rb

class UsersMailer < ActionMailer::Base
  def welcome_email(user_id)
    @user = User.find(user_id)

    mail(to: @user.email, subject: "Welcome") do |format|
      format.text
      format.html
    end
  end
end

See views on emails:

app/views/users_mailer/welcome_email.html.erb - HTML version
app/views/users_mailer/welcome_email.text.erb - TEXT version

Finally, sending emails:

user = User.find(1)

mail = UsersMailer.welcome_email(user.id)
# mail.deliver_now
mail.deliver_later

Testing Sidekiq jobs (with RSpec framework)

Sidekiq provides tools for testing the various aspects of your workers at any stage of their lifecycle. To test workers directly, use:

worker = MyWorker.new
worker.perform(:my_arg)

Or you can use an inline mode:

# implementation
class DeleteFromRemoteApiWorker
  include Sidekiq::Worker

  def perform(item_ids)
    ApiWrapper.delete_items(item_ids) # dependency
  end
end


# test
describe DeleteFromRemoteApiWorker do
  let(:items) do
    # ...
  end

  it "delegates the work to the API wrapper as expected" do
    allow(ApiWrapper).to receive(:delete_items)
    item_ids = items.map(&:id)

    described_class.perform_async(item_ids)


    expect(ApiWrapper).to(
      have_received(:delete_items).with(item_ids)
    )
  end
end

Why do we (still) use Sidekiq in outsourced projects?

Mastering Sidekiq is not something you’ll need a triple digits IQ for. Nevertheless, ‌stable and reliable software is a must for processing thousands of workers. This tool uses exclusively Redis as its database, which might not suit all. Memory leaks are also a thing to be aware of…

Nevertheless, Sidekiq architecture is perfect when working with complex Ruby applications. For example, we created a virtual learning environment complete with live chats, video streaming, billing charges, and more, with Sidekiq in our tech stack.

Sidekiq is ideal for those who require fast speed, executing 7100 jobs per second. Multi-threading abilities mean that multiple jobs can be queued in the background without affecting the synchronous workflow of the application, improving overall performance.

So, is Sidekiq still our best buddy? Yes! Happy birthday, Sidekiq! 🎂

Image via Giphy

What Makes A Good Code — Interview With A Back-End Developer

ShakuroInc — Fri, 17 Feb 2023 11:11:23 +0000

What does a back-end developer do? It’s easier to explain with the example of a Swiss watch. If a Swiss watch is a web platform or web application, then UI/UX and frontend is its design. But such watches are in demand not only because they represent your status through luxurious looks. Swiss watches have the most reliable mechanisms. They never break. A backend developer in a digital project is a person who creates and designs a reliable mechanism, so that the website works flawlessly.

An ‘official’ explanation of the term is that a back-end or backend developer is responsible for the internal and computational logic of a website or web application, as well as other software and information systems.

Because Shakuro specializes in complex and large projects, we, of course, have our own backend development department. Their primary tool is Ruby on Rails.

We interviewed one of our backend developers, a professional with over 25 years of experience in IT, to learn everything you need to know about backend in a global digital agency.

— Is programming an art, craft or engineering?

It’s everything you said. Programming is an art because, to the trained eye, good code looks aesthetically pleasing. It’s a craft because it’s well-paid, and it’s engineering because programming follows strict rules, and every web project has an architecture.

— What’s the thing you’re most proud of about your team?

Our knowledge base, for sure. We have accumulated a lot of experience throughout the years. Positive and negative. There is no shame in writing down all of it. So we do. We have created an obscurely extensive library of best practices with pictures, comments and code, examples of unique features and functions.

The knowledge base serves 2 purposes: saves time and money for our clients, and creates a certain unity, or uniformity, if you like. The knowledge base makes it much easier to carry out different projects. Digital products we get involve not 10, or 100, but 1 000, and 10 000 files… coding from scratch every time is difficult to deal with. We stay creative for the most part, but making our work more “formal” with the help of the library is essential in our deadline-heavy environment.

— Do back-end developers communicate with designers?

Yes, of course. We’re not just “hammers and nails” that do nothing but code. We care ‌about aesthetics too. Sometimes, the ready-made elements of the mockup that designers draw up turn out to be too cumbersome to implement. In that case, we communicate with the UI/UX team to explain to them the difficulties with the mockup, so they change some things in a way that they will work. However, that happens ‌rarely nowadays. Experienced designers know how to create efficient concepts.

— Describe what you do in a week.

The team has morning calls every day, where we discuss our current projects and plan our day. We synchronize our progress, discuss problems, and prioritize tasks. Meetings often involve front-end developers, project managers and designers. We write action items for every call: they involve infographics, pictures, comments.

After that? Hard work. At the end of the week, on Fridays, we organize “happy hours” calls.

— Shakuro is an outsourcing company that uses an agile development system. How does it reflect on your work?

I think agile development principles are very useful for back-end development. One of the common practices in agile development is that some of our team members conduct code review. There is a number of benefits to do it:

Early debugging.
The code stays with the company.
We can learn from each other.
Teamwork is taken to another level.
“Truth is sprout in discussion.”

— What are “happy hours” calls in agile development?

Every development department in Shakuro has their own “happy hours”: it includes frontend, and mobile developers too. Each group meets separately to discuss what problems there were during the week, what interesting technological trends and news they learned about. It’s usually a relaxed talk, but often over-prepared people… like me, chuckles show presentations along with their speech.

We share things ‌we think are important, fueling our interests in technology. That helps with burnouts a lot. “Happy hours” exist to break the ‌monotonous working cycle.

— Are developers afraid of change?

I wouldn’t say so. Sometimes, it’s the opposite: when we discover a new way to build a web platform or a web app, for example, a new library we could use, an urge to try it out immediately comes out. Experience says it’s not always healthy. Trying new things takes more time and consideration. We never experiment before discussing the risks. It’s hard work, balancing between creativity and formal brick-and-mortar processes. However, even if you do the same thing for the 100th time and it still works without complaints, you feel good about your job.

— What new things have you tried lately?

Proko web platform

With Proko, an e-learning web platform, we implemented online streaming rooms. It’s kind of like a private Discord. A teacher can organize a video call inside the web platform, add students and other administrators, and interact with the screen, adding texts, videos and pictures. It’s like a private TV, but with the ability to stream your class on YouTube, Twitch, Facebook, etc. The technology is still new, so it causes stress, because not everything works as it should at once. Stress is rewarded by the feeling that 99% of people don’t do the things that we do.

— What makes a good code?

Good code has 3 solid characteristics: you can read it easily, understand it, and enhance it. A professional developer remembers that the primary audience for the code is not the computer, but another human being. Our back-end department aims to write code that will serve businesses for a long time. Good code can be reused as a base for future enhancements.

So, the ability to read, understand, maintain and enhance code makes it good.

In conclusion

Illustration by Nino Bedijn

To remain afloat and profit in the current changing situation business owners have to be open to new ways to control costs and increase business efficiency. Companies must rethink their businesses and invest in adaptability and resilience. Choosing an outsourcing agency with a professional back-end department is a smart thing to do. Contact our agency to learn more about our services and discuss your ideas.

What Sigmund Freud Can Teach You About Using WordPress Plugins

ShakuroInc — Thu, 26 Jan 2023 16:22:45 +0000

If Mr. Freud were alive right now, from all the bullying that his child, psychoanalysis, gets on the Internet, he would probably have a heart attack and die again. However, there are several principles of psychoanalysis that we can apply in everyday life, even now, even in website development.

Freud divided the human psyche into three parts: Id, Ego, and Super-Ego. The unconscious desires and instincts live in the Id: I want my website to make more money so I can buy more things. Reason and logic live in the Ego: In order to attract new long-term users, I should think about creating an engaging and stable platform. Social norms, morality, and rules live in the Super-Ego: I want to make my website inclusive, so that any person can be satisfied while using it.

Let’s imagine that WordPress plugins serve the Ego in the Freud’s system of the world. A wide set of add-ons, extensions, templates, and useful, neat features that WP offers are the mediators between your “animal desires” to earn profits and high aspirations to help the world. WP plugins are just tools, but they connect the Id and the Super-Ego. They are just code. They are cold and logical. Let’s discover what WP plugins are and what more they have in common with Freud.

If WP plugins were a movie character. Image via Giphy

What are WordPress plugins?

A WordPress plugin is a piece of code that is “embedded” into your WordPress site. Simply put, it is an extension of your site that modifies and enhances the core functionality of WordPress.

Instead of editing the original codes, using plugins is the best way to extend the functionality of WordPress. It’s easier to download and install plugins than to set up a long set of code. Working with code is a difficult task. Our back-end developer recently explained why.

With plugins, you only need to turn on additional code to change the original one. When changes are no longer needed, you can turn them off by disabling the plugin.

It’s great that there are thousands of pre-designed plugins available for WordPress. Proper use of plugins will not only increase the functionality and usability of your site but will also improve your workflow.

What can a WordPress plugin do?

Plugins are modifiers that turn an ordinary blog into a website of any form and functionality. With just a few simple steps, plugins will turn your site into an e-shop, magazine, portfolio, learning management system. Anything you can think of, really.

For example, if you’re building an online store, WooCommerce is your new best friend. Do you want to make a website for a booking system? Check out Bookly:

Maybe you’re a photographer who wants to showcase your work on your website? The Envira Gallery plugin is a perfect choice:

While some plugins will completely transform your site, others act as simple changes behind the scenes. You may not see it change, but plugins optimize the site. For example, you can add WPSmush to compress your images. W3 Total Cache will improve the performance of your website. Plugins like Videophones increase the security of your site.

Pleasure and pain principle in WordPress

Family Guy via Giphy

One of the cool things that Sigmund Freud taught us is the pleasure-pain principle:

_The pleasure principle strives to fulfill our most basic and primitive urges… When these needs are not met, the result is a state of anxiety or tension.

WP plugins are very much connected to this principle. Because sometimes, especially if you’re creating something alone, you can’t get them to work. Frustration, anxiety, and tension are the mildest words to describe your feelings._

Here are the most common WP plugin problems and what to do with them (fighting the pain):

The plugin is no longer supported. What to do?

Plugins are written by people, and people, as you understand, are all different.

Their life circumstances can also be very different. It also happens that even popular plugins can suddenly stop updating. The author does not respond to letters, pleas, etc. As a rule, if the plugin is not updated within a year, this is already a serious hint that it is time to look for a replacement. Even if the plugin seems to work fine, it can pose a security risk with newer versions of WordPress. There can be only one piece of advice here — slowly look for a functional replacement. Look also at paid plugins. As a last resort, you can try to search the forums for a freelance programmer to finalize the plugin. This, however, can cost you a very serious penny and will still be only a temporary solution. If you reach out to an outsourcing company, maintenance is usually included in the development package.

The white screen of death. The site is no longer working.

White screen of death

Increase the PHP memory limit. For this, edit the wp-config.php file on your WordPress site (in the WordPress site’s root folder). Use an FTP client or file manager in your web hosting control panel. Paste this code, and WABAM, memory increases.

There are some recurring problems with plugins, but I can’t stop the website, and I can’t afford to lose users!

If you don’t want users to notice something, use a plugin that can help you troubleshoot without stopping your site. Install and activate the health check and troubleshoot plugin.

The plugin worked fine and then suddenly stopped.

Let’s think of what you updated before it stopped working. What plugins? When did you notice the problem? Or maybe they just changed the subject? Different plugins can easily be “naughty” with different themes, but individually or with other themes, they “feel” great.

I can’t add plugins to my WordPress.

Some beginners don’t know that there are two versions of WordPress: WordPress.com and WordPress.org. While the .org version gives you the freedom to use any plugin you want, the .com version does not. Only users who have purchased the WordPress.com Business Plan can add plugins to their sites. However, the number of plugins available for installation is limited.

Where to find plugins for WordPress?

There are several places where you can find WordPress plugins. However, be careful when choosing where to download plugins. Plugins released by unreliable developers can harm your site.

The WordPress directory is the best place to find plugins. You can choose from over 50,000 plugins. You can also invest in buying premium plugins. There are WordPress plugin marketplaces that provide premium plugins like Code Canyon, MOJO Marketplace, or Creative Market.

To install plugins from the WordPress directory, you can go to Plugins > Add New in the admin panel.

Before installing plugins in WordPress

There are a few things you need to consider before installing any plugins.

First, you need to know what your site really needs. Don’t come to the WordPress repository without knowing what you’ll need and installing whatever you like. This is inefficient and time-consuming.

Second, research the internet for plugin recommendations. This step is helpful if you already know what you need but don’t know which plugins will help you achieve your goals.

Finally, you need to check the compatibility of the plugin with your WordPress version and theme. Some plugins may not support an older or newer version of WordPress. And if your theme does not support the plugin of your choice, installing it can cause serious problems.

Is WordPress a relict like Freud?

Psychoanalysis is a perfectly valid school of (magic) psychology, but many of Freud’s ideas have died out with time. WordPress has been around for ages — 18 years!

Despite all the advantages of WordPress CMS, this platform has several disadvantages:

Duplication of pages and images,
A large number of unverified extensions and themes with errors,
A limited set of basic features,
Decrease in web page performance (due to a large number of installed plugins).
The benefits of WordPress make web development happen easier and quicker. For many business owners, choosing between custom web development and one of the ready-made solutions (with WordPress being one of the available options) is not an easy task. We know from experience that the overwhelming majority of websites are created for medium-sized and small businesses, and WordPress is great for this mass segment of the digital economy because:
It lets businesses minimize the time needed to enter the market.
It’s inexpensive.
It’s very popular, so the website owner will never be left without support.
Every approach has its own set of drawbacks, advantages, and cases. Wonder if your website should be done with WordPress or not? We can help. Don’t hesitate to turn to us for advice and consultation about WordPress website development services, and we’ll tell you what approach seems to be the most beneficial in your case.

This article was inspired by Jerod Morris.

Written by Rita Kind-Envy

6 Strong Reasons To Start Learning C# Language In 2022

ShakuroInc — Wed, 25 Jan 2023 18:25:02 +0000

App and software development has become one of the most popular working fields. According to the U.S. Bureau of Labor statistics, the number of employed developers will gradually increase and reach 22.2% in 2030. Therefore, software development is a very beneficial area worth your attention.

If you are a developer who wants to grow in this field, then you need to choose a programming language to use. There are dozens of them. However, few languages will bring your work to a new level.

In this article, we will dwell on C# — one of the top 10 popular languages in the world.

A list of most popular programming languages in 2021

What is C# language?

Microsoft released this programming language in 2002. It was initially built for Windows and later adapted to Linux and macOS. With time, C# has become an open-source code, and now it runs on .NET cross-platform. Microsoft took the original syntax from the C language, so the names and structures of these two languages are similar.

The application field for the C# language is extensive. It can be used for creating:

Mobile apps for both Android and iOS with the help of IDE Xamarin;
Desktop apps. Skype, Powerpoint, and even Adobe products are running on C#;
Antiviruses and protection software. With the C++ programming language and Java, C# is the foundation for these apps. It’s closely connected with Windows OS, so if something is eating your memory, you’ll notice the breach;
Web apps & services. Both back-end and front-end developers use C# for their needs. It’s incredibly convenient since you can run this coding language directly in your browser;
Video games. C# is trendy among game developers because of the Unity engine;
Machine learning. It has always been a top investment option for large businesses. With the help of the ML.NET platform, C# is a perfect choice for coding AI;
VR apps. Thanks to Unity, people use C# for developing virtual reality applications as well;

A large field of application is a great advantage. It allows you to create projects in different areas without professional retraining.

Below, you will find six solid reasons why programming in C# is worth your time.

1. Hunger for the C# coders

Many companies use C# to develop mobile and desktop apps. Thus this programming language is extremely popular. Although more and more people switch to the developer’s profession, the demand for these specialists doesn’t drop, as well as their salaries. According to the latest statistics, C# programmers still have one of the highest salary rates in the world.

C# developers have one of the highest salary rates

Another reason recruiters hunt for C# developers is the growing popularity of machine learning technology. With its algorithms, ML pumps up business revenue and scope. At least 95% of the world’s leading companies have ongoing projects in machine learning. Most require programming in C# to code smart brains for AI.

Moreover, during the pandemic, businesses have switched their attention to the online world. These companies also crave programmers because they need to develop mobile and web applications for the products, not to mention cybersecurity for the banking and medical sectors.

2. Low learning curve

Unlike other programming languages, C# is relatively easy to grasp. You can learn C# programming in a few months if you already have some coding knowledge.

In 2002, Microsoft strived to create a universal code for developing software on all available platforms. Their aim was a language with a clear structure, easy-to-read syntax, and high utility.

The Microsoft team took the C language as a base for their creation. Then they imported viable solutions from other languages like Delphi, Java, and Smalltalk. At the same time, the team did its best to remove all the bad feats taken along with the C structure.

Programming isn’t about what you know; it’s about what you can figure out.
— Chris Pine

As a result, C# has a specific syntax. It boosts the overall readability, so a developer can quickly understand the code and make necessary improvements. Moreover, it’s designed to be a high-level language, meaning C# does lots of things automatically. While programming for C++ and Java, you need to prepare parts of code manually.

The high readability makes C# an excellent choice for large development teams. With this type of teamwork, sometimes you need to pass the code from one developer to another.

The main advantage of the .NET platform and C# is that it provides automatic memory management and cleaning. It also allows the developer not to worry about the device configuration where the code is running.

Thanks to a specific syntax type and lots of improvements, C# is a go-to option for beginners.

Programming courses concept by Samuel Oktavianus

Once you master C#, you will have an easier time learning other back-end languages, for instance, C, C++, or Java. The reason is C# has a similar structure. This means you or your dev team can quickly sharpen their skills (pun intended) and create new, more advanced projects.

3. Friendly community

The C# language has one of the largest communities in the world. There are approximately 6,2 million developers who use C# for their projects.

If you encounter a problem you can’t resolve, you will most likely find a solution on the Internet. The .NET platform provides detailed C# programming tutorials and recommendations for particular cases, code formatting templates, etc.

Alternatively, there are hundreds of solutions on Stack Overflow. With the native ability of any C# IDE, you can surf the source code of most libraries and read it while working on your project. GitHub has a great C# community as well. There are lots of threads where you can find answers and brothers-in-arms.

Apart from these two platforms, you can find local forums for additional information and FAQs. C# Corner is one of the largest communities of C# and .NET developers. People post various events, podcasts, and videos on programming in C# for beginners, as well as additional modules to help fellow developers.

4. Fast processing

At first, C# was designed as a part of the Microsoft .NET framework. In 2021, .NET and .NET Core frameworks joined into a single, well-engineered .NET 6 version that has become a universal platform for C# development. It is one of the fastest solutions for software programming.

Over time, the C# language has gained many features that optimize performance and remove memory leaks. The cutting-edge Microsoft platform and significant improvements make C# a fast working language.

5. Constantly developing

C# is one of the rapidly developing languages in the world. All thanks to never-ending support from Microsoft and the community.

The Microsoft team has been developing C# for more than 20 years. They always try to add new features based on people’s feedback and suggestions. The team has a GitHub page where everyone can express their opinion on the current C# state and read public updates and release notes.

Copy-and-Paste was programmed by programmers for programmers actually.
— r/ProgrammerHumor on Reddit

Another thing that encourages development is an open-source code that can be easily modified to current needs. However, Microsoft takes good care of its creation and strives to keep C# simple and flexible.

With the Microsoft team watching over, the C# programming language will thrive for many years to come.

6. Object- and component-oriented

There are several programming paradigms or ways of code writing based on a specific calculation model: procedural, functional, and object-oriented — each is suitable for particular needs.

C# is an object-oriented and component-oriented language. Thanks to constructs directly supporting this concept, C# is a perfect language to create and use software components.

Meme about programming from Reddit

When developers use C# for object-oriented programming, they organize code via objects that connect data with behavior. The advantage of this paradigm is easy troubleshooting: if something goes wrong, you know where to fix it. Also, the inheritance feature allows you to reuse the code more efficiently.

Conclusion

As you can see, investing your time into learning C# is a long but precise shot. The C# software developers are in high demand, while the programming language is very flexible, versatile, and friendly to beginners. Apart from that, it has a strong community supported by Microsoft, which keeps an eye on its “child” and appreciates the users’ feedback.

You can use C# for various projects: desktop and mobile apps, cybersecurity, web development, VR and video games, etc. If you are a business owner, now you know what programming language to consider for your project.

Contact our team if you have an idea that awaits implementation. Our developer team will do their best to bring it to life.

RabbitMQ in Microservice Architecture

ShakuroInc — Thu, 29 Dec 2022 11:21:45 +0000

When working with large applications, developers often come across different problems. The bigger structure, the harder it is to support it. With time, all the issues might start snowballing, and it will be more difficult to cope with them.

Microservice architecture is not a new topic, but it has gained more and more popularity recently. This development style approaches a huge application as a collection of services. Teams realize that in order to scale, consume resources efficiently and be able to keep the code base of huge software manageable, it’s important to break the monolithic structure into small pieces. In this case, each group focuses on its own domain and develops the solution loosely connected to the rest of the product while keeping its own work cohesive.

The key problem is how to make these pieces talk to each other. In general, there are two ways of doing that — synchronous and asynchronous with the help of various message brokers. For example, RabbitMQ.

In this article, we will cover both communication methods, their pros and cons. We will also dwell on the popular message broker and see how a developer can implement it into a microservice architecture.

Synchronous communication

In this case, we are making direct calls from one service to another, requesting information, or making changes. The response to the request must be received for the execution to continue. This is how you would approach the task in a monolithic app (calling functions one after another in a chain). It is usually considered a quick and ‘dirty’ method with a big benefit in clarity.

Basically, you are replacing local function invocations with remote calls. You know what’s being called and don’t need to walk the extra mile to make APIs (and their clients) support asynchronous communication.

Still, this path is full of obstacles:

If each service is covered with 99.9% SLA (service-level agreement), then with each external call, the SLA keeps dropping. At some point, you find yourself shifting from the maximum of minutes outage per year to hours on certain endpoints;
You have to deal with blocked calls, retries, fallbacks, and caching;
Clients may time out waiting for replies to complex requests ; Almost inevitably, you’ll be forced to deal with distributed transactions. It’s not a direct consequence, but since your architecture is aimed to be synchronous, you will want to make atomic changes in several services. This is a classical distributed monolith which isn’t much better than the original monolith application you were planning to eliminate. In fact, it’s even worse.

Asynchronous communication

This development method is all about using a central bus for notifying all interested parties of events happening inside the app. This is where you eventually come to the majority of books on microservices. The idea of microservice architecture lies in the independence of parts from each other. Think of them as tiny monoliths focused entirely on a single function.

But if all of them are interconnected with direct calls, how are they better than a single application? They aren’t. In fact, having it all in single software would be way better, faster, more resilient to failures, and easier to manage.

In order to support the separation and loose coupling, services should communicate with indirect messages. These are mostly events, but sometimes there is a need to send a command to request an action.

Commands instruct services to take certain actions. A simple example is a scheduled action that emits commands periodically (initiating a weekly report on Sunday at 5 pm). Specific services listen to commands, receive and consume them. If you feel that commands introduce the dependency, you may decide to replace the “CreateWeeklyReport” command with a “WeeklyReportingRequired” event. This way, you make the scheduler not know which service will be preparing the report. It will break the dependency. There are other options, and you need to find what works best for the task at hand.
Events state the changes in the system (user created, comment added, order fulfilled, etc.). Messages of this type are emitted by the services themselves and listened to by others.

Handling reports looks like a chain reaction. An event is handled and triggers new ones until all related tasks across the services of the application are finished. For example, when you decide to register a new client in your app, you may send an API request to the Users service with a name, email, and other info. Upon successful registration, the service emits a “UserCreated” event which is listened to by the blog (it registers a new author in its database), a notifications service (it sends a welcome email to this new user), and so on. Each of them may emit its own events and trigger more handlers.

RabbitMQ vs. Kafka

Here we come to the important question of how we deliver these events. By this time, it should be obvious that this mechanism is the main artery of the whole application. It should be reliable and fast. A huge structure will be full of processes flying back and forth between numerous services.

There are several battle-tested solutions for this. In order to make a wise decision, a web developer needs to study and consider them carefully. They all have their niches. There are two popular message brokers:

Kafka. If you are reading this, chances are you’ve heard about this one. There are books, courses, and conferences about it. Kafka is a message bus and integrates well with hundreds of tools on the market. It is definitely worth considering. Especially when you want to store events for prolonged periods of time (if not indefinitely).
RabbitMQ is an open-source software, a small and very fast implementation of the Advanced Messaging Queue Protocol (AMQP). Kafka does not support this protocol, by the way. It is a message broker with a concept similar to mailboxes and queues with one or many consumers connected to them. Messages land into exchanges and are directed to specific queues via the routing rules. One important thing that differentiates it from Kafka is that RabbitMQ is consumer-centric, while Kafka is producer-centric. This message bus tracks what consumers have received and processed via the mechanism of acknowledgments (automatic or manual). For you, it means you do not need to store the pointers to the last processed event. The tech handles this for you.

How to use RabbitMQ

Finally, we came to the meat of the article. Here we will see how exactly RabbitMQ can be implemented as a broker in an application.

Imagine that we have a tiny e-commerce app. We break its structure into several services according to their domains:

Users’ service registers future clients so that they can log in and work with the product.
Store service allows managers to fill catalogs with products and take care of inventory while customers browse the wares and place orders. We could break this process down further to separate catalog from inventory, carts, and the ordering system, but let us keep it simple.
Notifications service monitors events and sends emails to users.

You may have noticed that we call people “customers” and “managers” (not “users”) in the Store section. It is who they are in the context of a store. And it is important to see things this way. Yes, you can make it so that an ID of a user in the Users service matches the ID of a customer in the Store section, or you can have a “user_id” field there if you like. What is important is that you follow your business language, but that is a topic for another day.

As described earlier, these processes can be looked at as tiny applications on their own. They have a purpose and can function separately from each other.

The Users service is a list of all clients in the software. They sign up and sign in, change their profiles, reset passwords and do all that people do with their accounts there. We can define and assign roles to them there, too. Alternatively, admins can do that, as well as see the lists of users, edit their profiles, delete them, etc. When the state changes, the Users service emits events (“UserCreated”, “UserUpdated”, “RoleGranted”, etc.). What is emitted and what the fields are is what you decide with the rest of the team.

The Store service allows managers to work with the catalog and inventory while customers list products and place orders. But how managers and customers are added or deleted? This is where the events come into play. We want clients to be added to the Store service database when they appear in the system and listen to an event from the Users, taking notes.

The notifications team also watches for new user events and sends welcome emails to them with the details on how to set their password and what the next steps are.

Now, let’s see how to design all this with RabbitMQ. And we will start with the message format.

Messages

The message bus does not really care about what data it transports. It can be text or binary. You have a huge choice of options, but we suggest sticking to traditional plain text formats (at least at first) for a number of reasons. The main is you will be able to easily read, log, and issue messages manually without any special tools. Of course, sending binary packages will give you faster times, but unless you are building some heavy-load system, this benefit may be outmatched by the difficulties of debugging and tracing.

Here is a typical “UserCreated” message:

{
  "id": "d0482898-5a6f-4c90-95d8-aecb35f3bf2d",
  "name": "UserCreated",
  "time": "2022-11-09T09:36:15Z",
  "data": {
    "user_id": "e31e52ed-3f84-414a-a03a-55356dcc01aa",
    "user_name": "John Smith",
    "email": "john@smith.name",
    "roles": ["store_manager"]
  }
}

It consists of several parts:

“id” is the identity of the message itself. If your service is not naturally idempotent (can safely handle the same message multiple times) and needs something to identify processed data, this field will come in very handy. RabbitMQ has the “at least once” delivery model, meaning that (in edge cases) the same message can be delivered more than once, and it’s your job to make sure it doesn’t break things;
“name” is the name of an event or a command;
“time” is clearly the time when this message was generated;
“data” is what holds the actual core. The fields set should be well-defined by all interested teams and stored somewhere for reference (even if it’s a text file). It can also be JSON, as in the example. Sometimes JSON Schema is used to describe the format of each message. Then it can be applied to validate incoming transmissions. We’ve also seen other development teams use centralized repository products for storing and navigating the message catalog. The next step is to figure out how to send transmissions from producers to consumers.

Routing messages

RabbitMQ has rich pathing capabilities. You can read about them in the official documentation. We chose to have a queue per service and direct messages to them from a central exchange via routing keys.

Here is what we need:

An exchange for sending transmissions;
A queue for each service to receive these messages. In the e-commerce case, their names are “store” and “notifications”. Queues are required because RabbitMQ delivers messages to each queue but doesn’t check if all of the consumers receive them. This means that if we’ve connected Store and Notification to the same queue, only one of them will randomly receive data.

Directing messages from the exchange to queues is easy with routing keys. Let’s assume that when a service sends some event, it passes the info to the exchange with the routing key “.events”. Any other service interested in events from this process needs to bind its queue to the exchange with the same key. It’s like a virtual connection between the exchange and queues that tells our message broker to channel transmissions marked with a specific tag to particular queues.

The format of the routing key is arbitrary. Using the key in the above format, we can declare that Store wants to consume events from Users by creating the binding between the exchange and the “store” queue with the key “users.events”. That’s all that it takes.

When it comes to sending commands to a service, we use the same principle. This time, a developer creates the binding between the target process and the exchange but works with a slightly different routing key to indicate that commands are expected — “.commands”.

For example, notification may need an explicit command for sending a weekly report. In this case, we create a binding between the exchange and the “notifications” queue using the “notifications.commands” key. Now, time to send the command message to the exchange with this route tag. The data will be delivered to the “notifications” queue.

Tips for working with RabbitMQ message bus

Dealing with message brokers is generally easy. However, there are some issues a web developer should be aware of:

RabbitMQ follows the “deliver at least once” principle, which means that the same message may be delivered more than one time. There are two ways to solve this. You can make the handlers idempotent so that they handle the same transmission twice without ruining the whole thing. Alternatively, make sure you record the messages you processed and avoid disaster.
If RabbitMQ (or any other broker, for that matter) crashes, there won’t be any data exchange. Think of a strategy to survive this. We suggest writing events into the database within the same transaction with your data changes and then using a background job to send these events to the message broker. This way, you will be able to retry the delivery until the bus is available.
Avoid using the same RabbitMQ user account to connect your services to the broker. This makes it impossible to:

Track which service is up (or down) and the number of their instances;
Fine-tune permissions to queues;
Monitor usage.

Do not use the guest account that comes with the fresh installation. It’s important to replace it with custom ones and non-default passwords from day one.

In conclusion

We have covered just the tip of the microservice architecture iceberg. Using RabbitMQ as the message bus in your applications, you can create a stable structure even with huge amounts of elements. Tips will help you design the architecture right, so that messaging will be durable and fault-resistant.

7 Ready-Made UI Components to Enhance Your Apps

ShakuroInc — Wed, 21 Dec 2022 14:37:35 +0000

Do you plan to create a mobile app with a well-designed, custom interface? One of the challenges you can come across is building UI components. For small teams, they can become a real frustration, costing precious time and money. How to make a custom interface that works well and attracts people?

42% of people will uninstall an app because of the bad UI/UX. That’s why UI components are an essential part of your product to become successful on the market. There are different ways to optimize the working process, including hiring an outsourced development company. Nevertheless, the simplest one is to use ready-made chunks of code. With them, business owners can present the desired example to the team, while developers can dive into a custom interface, see how it’s implemented and apply the solution right away.

To save you time, we gathered seven animations ready for integration into your project. They are created for iOS apps running on the Swift programming language.

Switching animation for a fitness app

Wellness applications are in high demand now. They require an extensive toolkit with tracking features and geolocation. However, you also need smooth animations to enhance the user experience.

For instance, what about the interface for switching between current physical activities and their settings? It’s rather complex: you need to consider what info to show, make it glanceable, display the frame change correctly, etc. That’s a lot to think about.

With a Swift UI component like MiFit, you can save a huge amount of time. This component represents the movement we described above: when the user switches between the map for current activity progress and its settings. The map frame goes up smoothly and turns into a small rounded curtain that helps to save the action context. The white layer creates a transition to the activities. To provide feedback to the user and catch their attention, the Play button has advanced microinteractions, which are a hot UI/UX trend for the upcoming years.

This type of interface also allows the user to check the distance, speed, time, etc. during the exercise, then return to the route and continue the movement. The MiFit animation shows all essential information about the route and activity. By implementing this component into your project, you can save lots of time and effort for the team.

Carousel animation for a movie app

A mobile application for a movie-watching platform should be convenient and pleasant to use. People spend some time browsing available films, their descriptions, and showtimes. This process must not be cumbersome. Together with working on the user experience, you can implement a few cool-looking animations. This strategy will boost the chances for your app to win the user’s hearts.

Using the MovieList component, you can build a carousel UI component library suitable for selecting a movie or an event with a mere swipe. In this interface, the user can look through available movies or events, where the movement highlights the selected film by enlarging the preview. Once the show is selected, the picture takes the whole screen, showing additional info about the movie. The user can scroll down and see all the essential details, like plot, cast, screenshots, and trailers, then see showtime dates.

The zooming and switching animations make the flow very intuitive, so people will enjoy browsing movies to watch on the weekend.

Lighting animation for a smart home app

Are you making a mobile application for organizing a smart home? Around 57 million American households use smart home devices. People are obsessed with intelligent devices that make their lives easier. It’s so cool when one can control lights, warmth, vacuum cleaners, kettles, and other things remotely with a tap! However, the interface for such apps should be crystal clear and extremely convenient because the users will not waste time tinkering around with it.

For creating a light-controlling animation, you can use the Lighting component. It is designed to adjust the intensity of several light sources. The UI consists of several sliders and buttons that are responsible for picking a room, switching on a light, and adjusting its intensity. Just by swiping the slider up or down, the user can control the light strength.

The movement is very smooth and responsive. Thanks to the layout, it’s possible to set brightness for all light sources or selected ones only. What’s more, this component is suitable for implementing the color choice logic with a convenient rounded palette. It is designed as a small curtain dragged from the bottom and doesn’t occupy the whole screen. There are a few recent color choices for a faster workflow.

Ticket booking animation for an event app

Creating an app for an event managing business is lucrative: it’s an easy way to attract potential users. If you go for this option, you can also apply ready-made UI components to speed up the software development process.

CinemaSeats component suits ticket booking apps for attending events, concerts, movies, etc. This interface represents choosing a seat and booking a ticket in several hall variants. It works as a layer hidden under the main frame that gently goes up. The animation clearly shows occupied and available seats for each hall. Below the user can see the price for selected tickets. Once they tap, the cost changes by flipping numbers for better clarity. If the person changes their mind and cancels the action, the main frame quickly drops on this layer and hides it to help the user return to film’s selection faster.

With CinemaSeats, you can implement standard logic. The user can pick several seats with a tap, select a certain period and book the tickets. The animation can be combined with the MovieList component to get a complete and well-designed user flow.

3D model rotation for a retail app

Today, mobile applications are a must-have for retail services. Around 2.14 billion people buy items online. To present your goods from the best angle, you need to implement certain animations. They will also allow the user to examine the product from all sides and get more satisfaction from the purchase.

For example, you can use Helmet — a UI component for iOS apps featuring a 3D model that can be freely rotated with a swipe or drag. It is designed to showcase an item in an e-commerce store. The 3D model can be rotated 360° slowly by swiping or dragging to see every detail. When the user selects a different color or item, there is a blurring animation with a fast rotation. It creates a soft transition, providing additional interactivity and enhancing the user experience. As a result, this component is a ready-made solution for an online store app.

Temperature control for an IoT app

Apart from controlling lights, a smart device application can also provide temperature adjustments for air-conditioning systems.

Simple sliders look too dull. With the Thermostat component, you can create the UI animation for setting the temperature by swiping a wheel. It allows the user to increase or decrease the numbers by moving the circle up or down at a different speed. The circle with a scale creates the impression of precision, and additional control, making a greater impact on the person. Moreover, you can bind logic for additional parameters like fan speed and air conditioner mode, turn it on or off, and set a timer.

Enhance your apps with ready-made UI components

To sum up, custom animations and cutting-edge design can greatly improve the user experience. Helpful applications with a convenient, user-friendly interface and pleasant visuals show higher user retention rates. By applying these UI components, you can attract more potential customers and get positive feedback.

Moreover, using a ready-made solution from an experienced team, you can get rid from a huge amount of work: concepts research, creating a UI from scratch, developing and implementing a great part of custom code. Our UI components are not just ready-to-use code, but serve as a source of inspiration in finding or developing your own project concept. We strive to make modern applications more functional, beautiful and give pleasant emotions to users.

If you want more useful solutions for your project, check out the Shakuro GitHub repository. There, you will find examples of various parts of apps, their processes, and their interface.

Future Web & Back-End Development Trends For 2023

ShakuroInc — Mon, 31 Oct 2022 13:16:43 +0000

Trends are changing like the wind: each year, new ways of solving tasks emerge. They are more efficient, beneficial, and favored in the market. By following these tendencies, one ensures stable business growth, as well as gains more competitive power.

In this article, we gathered a dozen of web and back-end development trends for 2023. They are from different areas, like e-commerce, programming languages, security, etc. Developers will find out what skills they should polish, while business owners will discover new toolkits for their future projects.

General development trends

Accelerated response time expectation

In 2022, people prefer using mobile devices over desktops: they take up 55% of the market. However, the Internet keeps evolving, and users expect web pages to load faster and faster, even if they have lots of content.

That’s why Google launched an open-sourced project for accelerated mobile pages (AMP). It’s designed to speed up websites on smartphones and tablets by using a stripped-down HTML and a lightweight CSS version. Usually, pages load in 3 seconds or so, while the AMP version loads in 0,5 seconds. It’s not surprising that this feature improves the user experience and the website’s visibility in search engines and conversions.

Two-factor authentication

This software development trend is related to security. Two-factor authentication, or 2FA, requires two methods of identity verification. They usually consist of a username and a password as the first factor, accompanied by one of the secondary verification options. The popular choices are “authenticator” mobile applications, SMS, or a phone call with the code. This type of authentication is robust against brute-force attacks, phishing, and social engineering. It keeps the account secure even if they were stolen due to an exploit or cybercrime. The criminals will be simply unable to access any accounts without having a physical device since they need it to complete the process.

Two-factor authentication improves private data protection and makes hacking users’ accounts harder. However, it still requires a password that is vulnerable to cyberattacks. The development trends suggest getting rid of passwords. This idea was supported by enterprises like Apple, Google, and Microsoft. The companies plan to build passwordless authentication for all their platforms.

Such an authorization method already exists: people unlock their devices with fingerprints, face IDs, gestures, etc. These options also increase protection for private data.

Single sign-on (SSO) through trusted authorities

It’s an authentication method that allows users to sign in to multiple applications with one set of credentials. They can be different: a usual password with a username, a fingerprint scan, or a one-time password (OTP). The login works through a trusted authority, for example, Google, Facebook, LinkedIn, or Twitter. Once the user enters valid credentials, the authority gives a token in return. This token contains info about the person, and it’s safely encrypted. When processing the token, the application ensures that it is sent from a trusted authority, not from a criminal. If it is from a safe source, the user will log in successfully. Such tokens can be used for a sign-in of multiple apps.

SSO divides into two types: social and enterprise. People often use their Facebook, Google, Twitter, or another social network account to sign in to a website. With the enterprise SSO, employees access the company’s collaboration tools like GSuite and Zoom.

SSO has many advantages. It boosts productivity since people don’t waste time searching and entering the right passwords. This method also influences security standards meaning only authorized users will access private data. A company can establish a certain security policy with a required password length, complexity, session expiration , etc.

Trends in software development for e-commerce

Chatbots integration

Chatbots are getting more and more popular — companies build them into websites and mobile apps. These smart assistants help customers get quick answers to FAQs, create online appointments and solve small issues. Another advantage is cost efficiency: a startup can save money because it needs fewer support managers. Chatbots are online 24/7, they don’t need holidays or sick days, as well as long-term onboarding. What’s more, they can collect users’ data for a marketing department and learn constantly by interacting with customers. These facts don’t mean that one can replace the whole support department with chatbots, but the managers can deal with more pressing issues and let bots solve simple problems.

The only disadvantage the chatbots have is they are text-based. The user has to type their questions or at least tap the pre-made FAQs. It requires time and effort and is not always convenient.

Voice search

The typing disadvantage led to the rise of a new software development trend — voice-based search assistants. The user can just say their requests, and an intelligent algorithm will find the answer or provide a solution. This way is easier, faster, and more engaging. No wonder this market is growing rapidly: it will hit $11.2 billion by 2026.

Voice search assistants are beneficial for both business owners and customers. They are saving time and allowing people to stay on a web page longer. And like chatbots, voiced search gathers information about the client’s tastes and preferences. Of course, there is much to improve. For instance, the way the bot interacts with search engines. Still, many small businesses started to adopt voice search and recognition services. They also invest in studying natural language processing, or NLP.

Augmented Reality (AR)

AR is a mobile and back-end development trend that has been extremely popular lately. It is a mixture of the digital and real world. The content can consist of different aspects, like audial, visual, sensory, etc. In AR, the transformed data is represented in our world as an overlay, creating a special interactive space. Such experiences require advanced input, environmental perceptions, and computer processing done preferably by a cloud tech. Nevertheless, the AR market is expected to hit $3.7 billion by 2025.

Many mobile applications use AR to deliver new content. Snapchat filters and games like Pokemon Go have been around for a while. However, now retail and makeup companies also implement this technology to make the user experience more immersive. Virtual fitting apps for sneakers and digital makeup studios to try on new palettes or hair colors — are just two examples of popular applications.

Apart from visualizing, AR makes step-by-step tutorials clearer and more illustrative. This fact influences decision-making. That’s why AR technology is perfect for e-learning projects since it’s very interactive and immersive.

Popular programming languages for back-end web development

Ruby

Ruby is a great multi-purpose language. It’s extremely flexible, and its code is easy to maintain. Over the recent years, the language has received well-deserved popularity due to its developer-friendliness, a great number of libraries, and thriving community. Ruby is cross-platform, meaning it runs on Windows, Linux, and macOS.

Ruby is used for automation, web scraping, command-line tools, data processing, and DevOps. However, However, most developers use it along with the fantastic Ruby on Rails framework for rapid web application development. With this tool, even a small team can create large applications very quickly.

Python

Python has been a popular programming language for back-end software development for quite a while. It’s easy to grasp, beginner-friendly, and constantly evolving. Moreover, the community offers lots of tools, ready-made libraries, and frameworks to boost language features. There are many learning courses, tutorials, and schools that teach Python. That’s why IoT, machine learning, and AI developers often use Python for their intelligent creations.

Elixir

Elixir is a Ruby-like programming language that was invented to cut the rough edges of Erlang. They have similar features, and Elixir has the tools its predecessor missed. Since Elixir is built on top of Erlang VM, it offers all the concurrency tools that are perfect for scalable, distributed, and fault-tolerant systems. This language is focused on back-end development and provides clear tools for debugging.

Go programming language, or Golang, was developed by Google in 2009. It’s an open-source project supported by the famous IT company and a large community. Although Go doesn’t have a large toolkit, it is rather easy to learn and straightforward, especially for C developers. Also, this language is great for microservice development since it’s quick and versatile, with a small software footprint.

Many large businesses prefer using Golang for creating apps. For example, Twitch, Dropbox, Uber, and others.

Back-end development trends in technology

Blockchain

Blockchain is a part of Web 3.0, the next Internet version. This technology has several ways of usage. In cryptocurrency trading, it allows people to bypass expensive payment systems, reducing transaction expenses and eliminating banking transfer fees. It also saves time: the money or data transfers are completed in minutes.

However, the main advantage of the blockchain is decentralization — it doesn’t have a main vault or server. It’s a distributed public ledger that records transactions across millions of devices. The data is kept in blocks and formed into a chain. One cannot take out or change the block from the middle of the chain without altering all other blocks in the network. Therefore, all the transactions history is publicly available and can’t be hidden or tampered with. So, the blockchain can also provide secured data sharing, copyright protection, and IoT management. Some healthcare companies work with blockchain to arrange medical records since the technology has a feature prone to history changes.

Artificial Intelligence

AI-powered assistants are an integral part of our lives. People use Siri or Alexa on their mobiles, laptops, smartwatches, tablets, and cars on a daily basis. These two voice assistants make up 36% of users worldwide, and most of the respondents say that this technology really improved their experience. It’s not surprising since voice assistants communicate with people in a natural way, creating an emotional bond between a brand and a client. They understand human language and learn to give more elaborate responses. There are lots of funny videos where two voice assistants talk to each other, supporting a rather thoughtful conversation. So, if you want to create a personalized experience for a user, integrating this development trend might be a great idea.

AI has proved itself as a perfect artist. Recently, neural networks created a blast in digital art. Smart algorithms of Midjourney and Dall-E can create a vast painting based on a few words. And by changing a phrase, one generates pictures in absolutely new approaches under a few minutes. The other AI technology allows people to restore the lost parts of an image while keeping the same style and color scheme. These features are valuable in UI/UX design and app development. They help save time and money, especially under strict deadlines.

Intelligent algorithms are also applied in data analysis. They can analyze large databases at light speed to find new insights and patterns. AI can also predict possible actions and suggest the best strategies for them. These features are essential when developing a company marketing strategy when one needs to analyze the behavior of all potential clients. Therefore, a product gets a higher chance of becoming demanded on the market. With AI, the data is gathered from all platforms, which is extremely convenient and helps see the whole picture.

Serverless Computing

The serverless model allows the running of applications using cloud-based servers. In this case, the back-end development team doesn’t need to worry about server availability, capacity, or managing infrastructure. Such services are provided by AWS, Microsoft Azure Functions, Google Cloud Functions, and others.

The business strives to reduce web development costs and prevent data loss and system overloading. When applying cloud technologies, there is no need to upgrade servers’ capacities — the cloud service provider deals with these issues. What’s more, the service fee is based on the actual server resource usage.

In 2025, the serverless computing market might hit $21.1 billion. Although this method is not yet widespread among classic websites and apps, this statistic still shows a growing demand for the technology. Most companies use serverless computing for image recognition, multimedia processing, chatbots and assistants, notification engines, IoT apps, data collection, etc.

Take advantage of the back-end development trends

Implementing these development trends into your business will help you stay ahead of the competitors, providing high-quality services and demanding products. However, it’s not wise to follow all of them at once: it’s better to pick only those that will help your business grow and fit into the workflow.

What Are The Most Popular Programming Languages In the USA?

ShakuroInc — Thu, 06 Oct 2022 12:31:41 +0000

The U.S. has a large development market share, bringing enormous revenues every year. If you decide to grow the business in that region, first learn what programming languages are popular in the USA.

Software and mobile app development are thriving industries. Thanks to technological advancement, they will remain beneficial for the years to come. To get the maximum income, it’s also crucial to pick a suitable country for growing an IT business. Although we live in the globalization era, some markets are easier to conquer than others. For example, the American one is faster to go in since it’s familiar to other software companies.

In fact, the U.S. dominates a large share of the development market. In 2021, it brought over 31.83% of the revenue share. The average salary in this sphere is around $100,076, according to Zippia. So, working with American customers is worth considering if you are a business owner or a developer.

Before starting a project, though, it’s wise to search what tools are popular in the U.S. This knowledge is crucial for small businesses and startups since any mistake leads to rising expenses.

For sure, the list of trendy skills differs in every sphere. In this article, you will discover the languages that are in high demand for web and app development in the American market.

What are the most popular programming languages in the USA?

The GitHub statistics below are based on the PYPL index, which analyzes how often people search for information and tutorials about certain languages on Google.

As you can see, the three languages at the top haven’t lost their position for a whole year. This fact is yet another sign showing that they are really in demand.

Let’s take a closer look at 7 languages for programming from this list that are suitable for web or app development.

Python

The work on Python began in the late 80s when people wanted to create a successor for ABC. The first version was released in 1991. Currently, Python is used in back-end development, and it’s a great language for creating scalable web applications. Large businesses like YouTube, Instagram, Pinterest, and SurveyMonkey are created with the help of Python. Moreover, it constantly ranks as the number one language worldwide. According to the StackOverflow 2022 developer survey, 48% of respondents use Python. There are several reasons.

The main one is that it’s beginner-friendly. There are tons of courses available, both free and paid. People post tutorials on YouTube, create small video games, and publish books explaining its coding principles. In addition, one can join hundreds of communities to study everything together.

Python programming language grants app developers lots of opportunities, but it still has a few advantages and disadvantages that may disrupt the work.

Pros:

Supports various libraries
High code readability
Scalability for complex applications
Open-source language
Works on multiple platforms

Cons:

Slow speed and execution
Consumes large amounts of memory
Not suitable for client-side programming

Java

Java was built by Sun Microsystems, Inc. as they strived to create a programming language that would help common devices to connect with each other. It was released in 1995 and allowed web developers to implement various multimedia into the Internet pages. Today, Stack Overflow’s list of the most commonly used languages places Java in the 5th spot.

It is a popular programming language for e-commerce websites and financial platforms for enterprises and Android applications. Google even built a Java framework for developing on this OS called Android Studio.

What are the pluses and minuses of Java?

Pros:

High security standards
Cheap to maintain
Platform independent and very flexible
Provides memory allocation and auto garbage collection
Supports multithreading

Cons:

Poor GUI builder
No back-up features
Paid commercial license

JavaScript

In 1995, Brendan Eich created JavaScript for the Netscape 2 browser. Later the Mozilla team continued to support this programming language for their Firefox browser. Although it was originally used only for building browsers, developers now work with JavaScript to deploy a website server and browser applications. Lots of small businesses and startups operate with a JavaScript runtime environment or so-called Node.js to write server and client-side scripts. This feature helps create dynamic web page content before the page is actually loaded in the client’s browser.

This front-end language has around 12 million users, which makes it one of the most popular programming languages in the USA. Despite large numbers of followers, JavaScript has a few downsides.

Pros:

Fast-running client-side scripts
High interoperability with other languages
Reduced load on the server
Tools to create catchy GUI
Can be used both for front and back end

Cons:

Low security on the client side
Performance depends on the browser
Limited tools for debugging

C++

Bell Laboratories had been developing C++ from 1979 till 1985. The creator, Bjarne Stroustrup, wanted to add object-oriented features to regular C. That’s why the new code got the name C++ — it means ‘C incremented’.

Although it was created in the 80s, C++ is still in demand. People use this popular programming language for low-level systems, like operating and file systems. Developers also operate with C++ for building desktop, mobile or web applications. Since it works well with the Unity engine, C++ serves as a base for VR and video games.

The programmers prefer writing in this code because it also provides STL or Standard Template Library. These are ready-to-use code chunks for various operations, features, and algorithms.

Pros:

Portable to other OS
Convenient memory management
Huge community
Scalability

Cons:

No garbage collection
Security issues

Swift

Swift was created by Apple in 2014 as a replacement for Objective-C. As a result, it supports similar concepts, but in a safer way, so it’s easier to find and fix bugs. With time, Swift has become open source, and now it has community support too. It’s not surprising — thanks to the convenient error prevention and other features, Swift programming language encourages developers to write consistent, neatly-looking code.

Swift is used to creating iOS and macOS X applications for various Apple devices, like iPhone, iPad, and Apple Watch. Since they are quite popular, studying or making Swift a part of the main toolkit is a wise decision for mobile developers.

Pros:

Open-source language
Focus on security and safety
High scalability
Great readability and maintenance
Interoperable with Objective-C

Cons:

Small community and few learning resources
Used only for Apple devices
Supports iOS7 or higher

Ruby

Ruby was developed in the 90s by Yukihiro Matsumoto. It was heavily influenced by Lisp, Perl, BASIC and other languages. Its main aim is to improve developers’ productivity and help them enjoy coding. Since 2006, this open-source language for programming has gained huge popularity among web developers and data scientists. Especially after the release of Ruby on Rails — a special framework that brought web development to a new level. It allows programmers to create complex applications in a short period of time without any quality loss. That’s why Ruby on Rails is a trend among startups. However, some enterprises like Twitch, Kickstarter, and Hulu use the framework for their needs too.

Although Ruby is mostly implemented in developing web applications, it’s a general-purpose language and can work in other situations at a slower speed. By 2022, the United States will be a leading country in terms of Ruby and Ruby on Rails usage. More than 100k American websites are running on this popular programming language.

Pros:

Web application framework (Ruby on Rails)
Open-source and has a large community
High readability and easy to understand

Cons:

Hard to debug
Suitable mostly for web
Slow processing

Kotlin

It was developed by JetBrains and later released as Project Kotlin. The team required an expressive language with a compilation speed that could be interoperable with Java. The developers use Kotlin for creating Android applications, as well as web and desktop apps. It also suits server-side development. Lots of companies operate with Kotlin, including Google, Pinterest, Coursera, etc.

Kotlin is among the top 3 languages that most businesses are planning to migrate their apps to in 2022. A key player in the delivery and taxi booking market, Uber, has moved the mobile application from Java into Kotlin.

Pros:

Compatible with Java
Easy to adopt
The code is less extensive than in other languages

Cons:

No static keywords
Compilation speed is unstable

Go

Go, or Golang, was created by Google in 2007 and released in 2012. They wanted to mix cool features of other languages while also retaining high performance in networking and processing. As a result, Go took readability from Python and runtime efficiency from the C programming language.

Google implemented Go in its applications; other companies like Netflix, Uber, and Twitch also work with Golang for app development. Although it’s relatively young, Go offers a huge library and vast documentation. Since the language works well with multiple systems located in different networks, it suits apps that constantly process large amounts of data. Moreover, the Go programming language is often used for creating messengers, video conferencing software, online games, microservices, networking, and cloud computing.

Pros:

Rich syntax libraries
High level of automation
Compatible with C
Easy memory control

Cons:

Lacks versatility
Too young and doesn’t have much support

🚂 Framer-Motion: New And Underestimated Features

ShakuroInc — Tue, 06 Sep 2022 07:37:42 +0000

Introduction

Framer-motion is a motion library that allows you to create declarative animations, layout transitions and gestures while maintaining HTML and SVG element semantics.

⚛️ Beware, framer-motion is React-only library.

In case it might be an issue for you, check out the greensock (framework agnostic animation library) tutorial.

You might be familiar with our previous article on the subject (Framer Motion Tutorials: Make More Advanced Animations). It first came out quite a few versions of this library ago, so in this article we want to:

introduce previously overlooked and more recent features of framer-motion.
remove styled-components to make demos a bit easier and to lower the entry threshold
cover how to use framer-motion with consideration to accessibility (prefers-reduced-motion) and bundle size.

Contents:

Setup
Keyframes
Gesture Animations
Accessibility
MotionConfig and reducedMotion
useReducedMotion
How to use prefers-reduced-motion with vanilla CSS and JavaScript
Scroll Trigger animation (whileInView)
Scroll Linked animations (useViewportScroll, useTransform)
Non-custom approach
Custom useElementViewportPosition hook
Reduce bundle size with LazyMotion
Synchronous loading
Asynchronous loading
Bundle size test
Layout animations
Shared layout animations
Conclusion

Setup

You can start with framer-motion in two easy steps:

Add package to your project: run npm install framer-motion or yarn add framer-motion.
Import motion component.
Start animating with motion component (rename any HTML tag with motion prefix, for example motion.div, motion.p, motion.rect) and configure animation with very straight-forward animate prop.
And ✨ the magic ✨ is already at your fingertips!

import { motion } from 'framer-motion';

export const MotionBox = ({ isAnimating }: { isAnimating: boolean }) => {
 return (
  <motion.div animate={{ opacity: isAnimating ? 1 : 0 }} />;
};

Keyframes

Values in animate can not only take single values (check out the previous example ⬆️) but also an array of values, which is very similar to CSS keyframes.

By default keyframes animation will start with the first value of an array. Current value can be set using null placeholder, to create seamless transitions in case the value was already animating.

<motion.div 
 style={{ transform: 'scale(1.2)' }} 
 animate={{ scale: [null, 0.5, 1, 0] }}
/>

Each value in the keyframes array by default is spaced evenly throughout the animation. To overwrite it and define timing for each keyframe step pass times (an array of values between 0 and 1. It should have the same length as the keyframes animation array) to the transition prop.

<motion.div
     animate={{ opacity: [0, 0.2, 0.8, 1] }}
     transition={{ ease: 'easeInOut', duration: 3, times: [0, 0.5, 0.6, 1] }}
   />

Let’s animate some SVGs. To create a basic rotating loader we need:

rotate: 360 animation and transform-origin: center (originX and originY) on root svg element.
Arrays of keyframes for CSS properties:
stroke-dasharray (pattern of dashes and gaps for outline of the shape).
stroke-dashoffset (offset on the rendering of the dash array).

<motion.svg
     {...irrelevantStyleProps}
     animate={{ rotate: 360 }}
     transition={{ ease: 'linear', repeat: Infinity, duration: 4 }}
     style={{ originX: 'center', originY: 'center' }}
   >
     <circle    {...irrelevantProps} />
     <motion.circle
       {...irrelevantStyleProps}
       animate={{
         strokeDasharray: ['1, 150', '90, 150', '90, 150'],
         strokeDashoffset: [0, -35, -125],
       }}
       transition={{ ease: 'easeInOut', repeat: Infinity, duration: 2 }}
     />
   </motion.svg>

You can compare css keyframes with framer-motion keyframes animation in the demo down below.

I personally see no difference in the difficulty of both realizations.

It’s probably a matter of personal preference or the project’s specificity. In any case, I feel like CSS keyframes should be preferred solution for this type of animation, especially if there are no need for any complex calculations or for the performance concerns (shipping less JavaScript is usually better) and if project is not already using framer-motion for something else obviously.

Gesture animations

Motion component allows us to animate visual representations of interactive elements with whileHover, whileTap, whileDrag and whileFocus props.

Just like with any other type of animation, we can either pass animation directly into props:
<motion.button whileHover={{ scale: 1.2 }}>Submit</motion.button>
Or use variants for more complex customisation:

import { motion, Variants } from 'framer-motion';

const variants: Variants = { variants: { tap: { scale: 0.9 } } };

export const Component = () => {
 return (
   <motion.button variants={variants} whileTap="tap">
     Send
   </motion.button>
 );
};

Similarly to keyframes, in case there is no need for complex calculations or transitions, most of those props (except whileDrag) can be easily replaced with CSS animations.

Accessibility

MotionConfig and reducedMotion

Animations on web pages may be used to attract attention to certain elements or to make UI/UX experience more smooth and enjoyable. But parallax effects, fade-in-out popups or basically any moving or flashing element might cause motion sickness or in any other way might be inconvenient or uncomfortable for a user.

So both for accessibility and performance reasons we need to give an option to restrict or even disable any motion on the page, and, as developers, to respect this choice and make sure it is implemented.

prefers-reduced-motion is a CSS media feature to detect if a user is indicated in their system setting to reduce non-essential motion.

🔗 More information on the subject:

- An Introduction to the Reduced Motion Media Query by Eric Bailey, February 10, 2017
- Respecting Users’ Motion Preferences by Michelle Barker, October 21, 2021

To properly implement prefers-reduced-motion with framer-motion, we can use MotionConfig – a component that allows us to set default options to all child motion components.

At the present moment in only takes 2 props: transition and reducedMotion.

reducedMotion lets us set a policy for handling reduced motion:

user – respect user’s device setting;
always – enforce reduced motion;
never – don’t reduce motion.

In case of reduced motion, transform and layout animations will be disabled and animations like opacityor backgroundColor will stay enabled.

In this particular demo I had trouble dynamically changing reduceMotion value. It wasn’t changing the inner Context.Provider prop unless I passed key={reducedMotion}. This is a very questionable and temporary solution just to make it work, but it at the same time triggers a re-render, which is far away for a perfect and definitely not production-ready solution.

useReducedMotion

For more custom and complex solutions or for any task outside the library’s scope (for example, to disable video autoplaying) we can use useReducedMotion hook:

import { useReducedMotion, motion } from 'framer-motion';

export const Component = () => {
 const shouldReduceMotion = useReducedMotion();
 return(
   <motion.div
    animate={shouldReduceMotion ? { opacity: 1 } : { x: 100 }} 
    />
);
}

It makes me very happy, both as a user and as a developer, that framer-motion is taking accessibility very seriously and gives us proper tools to meet any user’s needs. Even though we have proper JavaScript and CSS solutions to do the same.

How to use prefers-reduced-motion with vanilla CSS and JavaScript

You can also achieve the same thing by using prefers-reduced-motion media-query with CSS:

@media (prefers-reduced-motion: reduce) {
 button {
   animation: none;
 }
}

@media (prefers-reduced-motion: no-preference) {
 button {
   /* `scale-up-and-down` keyframes are defined elsewhere */
   animation: scale-up-and-down 0.3s ease-in-out infinite both;
 }
}

Or window.matchMedia() with JavaScript:

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');

mediaQuery.addEventListener('change', () => {
 const isPrefersReducedMotion = mediaQuery.matches;
 console.log({ isPrefersReducedMotion });

 if (isPrefersReducedMotion === true) {
   // disable animation
 }
});

Scroll Trigger animation (whileInView)

Scroll Trigger animation is a great way to capture users attention and make elements more dynamic.

To create Scroll Trigger animation with framer-motion, let’s use whileInView prop.

<motion.div
 initial={{ opacity: 0, y: -100 }} 
 whileInView={{ opacity: 1, y: 0 }} 
/>

We can also use onViewportEnter and onViewportLeave callbacks, that return IntersectionObserverEntry.

Let’s use variants ⬇️, which make it a bit easier to define more complex animations.

There is also a way to set configuration with viewport props, some of the options we can use:

once: boolean – if true, whileInView animation triggers only once.
amount: ‘some’ | ‘all’ | number – default: ‘some’. Describes the amount that element has to intersect with viewport in order to be considered in view; number value can be anything from 0 to 1.

import { motion, Variants } from 'framer-motion';

const variants: Variants = {
 hidden: { opacity: 0 },
 visible: { opacity: 1 },
 slideStart: { clipPath: 'inset(0 100% 0 0 round 8px)' },
 slideEnd: { clipPath: 'inset(0 0% 0 0 round 8px)' },
};

export const Component = () => {
 return (
   <motion.div
     variants={variants}
     initial={['hidden', 'slideStart']}
     whileInView={['visible', 'slideEnd']}
     exit={['hidden', 'slideStart']}
     viewport={{ amount: 0.4, once: true }}
   />
 );
};

One unfortunate limitation is that whileInView doesn’t work with transition: { repeat: Infinity }. So there’s no easy way to do infinitely repeating animations that play only in the users viewport. onViewportEnter and onViewportLeave callbacks (with ⚛️ React’s hooks useState and useCallback) is probably the best way to do it.

Scroll Linked animations (useViewportScroll, useTransform)

To take it one step further, let’s talk about Scroll Linked animations, which are a bit similar to Scroll Triggered animations, but more fun! ✨

useViewportScroll and useTransform are animations that are bound to scrolling and scroll position. Scroll Trigger animations give users a more exciting browsing experience. It can be used to capture users’ attention, and it is a great tool for creative storytelling.

Probably the most popular pick for Scroll Linked animations is GreenSock’s ScrollTrigger (just like in our demo).

Unfortunately, compared to GreenSock, Scroll Linked animations with framer-motion will require more custom solutions and take more time to achieve. Let’s find out why and figure out the approach step by step.

Non-custom approach

For Scroll Linked animations with framer-motion, we need:

useViewportScroll hook, that returns 4 different MotionValues, we will use only one of those – scrollYProgress (vertical scroll progress between 0 and 1).
useTransform – hook, that creates a MotionValue that transforms the output of another MotionValue by mapping it from one range of values into another. In this demo, we will use the next set of props to pass to the hook:

-scrollYProgress to sync vertical page scroll with animation;

-[0, 1] – range of scrollYProggress when animation plays;

-[“0%”, “-100%”] – range of x to transform during vertical scroll change.

Long story short, hook transforms x (horizontal transform value) of the motion component while scrollYProgress is in range between 0 and 1 (from start of the page to the very bottom) from 0% to –100%.

It’s not in any way a full explanation of how the hook works and what props it can take. Check out the full documentation for useTransform.

3.To replicate in some way GreenSock’s ScrollTrigger – pinning motion component in viewport while animating we need to wrap it into two wrappers, outer wrapper has to have height > viewport height and inner wrapper has to have position: sticky and top: 0; position: fixed, depending on the animation, might work as well.

Check out the full styling down below ⬇️ or in the sandbox demo.

import { motion, useTransform, useViewportScroll } from 'framer-motion';

export const Component = () => {
 const { scrollYProgress } = useViewportScroll();

 const x = useTransform(scrollYProgress, [0, 1], ['0%', '-100%']);

 return (
   <div style={{ height: '300vh' }}>
     <div
       style={{
         position: 'sticky',
         top: 0,
         height: '100vh',
         width: '100%',
         overflow: 'hidden',
       }}
     >
       <motion.p style={{ x }}>
         Rainbow Rainbow Rainbow
       </motion.p>
     </div>
   </div>
 );
};

You probably already noticed the main issues with this kind of Scroll Triggered animations. First of all, animations play through the scroll of the whole page and not a portion of it. And the second problem, is that animating x from 0% to -100% makes motion component to scroll out from the viewport (partially or fully, depending on the viewport width) before scroll of the page ends.

Let’s fix these issues in the next chapter ⬇️ by using a custom hook.

Custom useElementViewportPosition hook

To address the issue, described in the previous chapter ⬆️, let’s create a custom hook that will allow us to calculate the range of viewports in which an element is visible.

Custom useElementViewportPosition returns position – value for second prop of useTransform hook – range between 0 and 1 (for example, position = [0.2, 0.95] means, that range is between 20% to 95% of the viewport).

// * based on: https://gist.github.com/coleturner/34396fb826c12fbd88d6591173d178c2
function useElementViewportPosition(ref: React.RefObject<HTMLElement>) {
 const [position, setPosition] = useState<[number, number]>([0, 0]);

 useEffect(() => {
   if (!ref || !ref.current) return;

   const pageHeight = document.body.scrollHeight;
   const start = ref.current.offsetTop;
   const end = start + ref.current.offsetHeight;

   setPosition([start / pageHeight, end / pageHeight]);
   // eslint-disable-next-line react-hooks/exhaustive-deps
 }, []);

 return { position };
}

To figure out the third prop of the useTransform we need to calculate carouselEndPosition – end value to transform to. It basically motion component’s width subtracts the window’s width. Check out the detailed calculations in the sandbox demo.

import { motion, useTransform, useViewportScroll } from 'framer-motion';

export const Component = () => {
 const ref = useRef<HTMLDivElement>(null);
 const carouselRef = useRef<HTMLDivElement>(null);
 const { position } = useElementViewportPosition(ref);
 const [carouselEndPosition, setCarouselEndPosition] = useState(0);
 const { scrollYProgress } = useViewportScroll();
 const x = useTransform(scrollYProgress, position, [0, carouselEndPosition]);

  useEffect(() => {
   // calculate carouselEndPosition
 }, []);

 return (
   <div>
     {/* content */}
     <section ref={ref}>
       <div className="container" style={{ height: "300vh" }}>
         <div className="sticky-wrapper">
           <motion.div ref={carouselRef} className="carousel" style={{ x }}>
             {[0, 1, 2, 3, 4].map((i) => (
               <div key={i} className="carousel__slide">
                 {i + 1}
               </div>
             ))}
           </motion.div>
         </div>
       </div>
     </section>
     {/* content */}
   </div>
 );
};

Now starting and ending points of animations, as well as transforming values, make the demo look more intentional and well-thought.

I’m not entirely sure that this is the best way to handle this type of the animation with framer-motion but it’s the best I could came up with at this moment. I’m very curious how others solve this. For example, CodeSandbox projects have really fun Scroll Linked animations landing and it looks like it might be built with framer-motion.

Reduce bundle size with LazyMotion

Probably every React ⚛️ developer at some point in their career has to face inflated bundle size problems. Shipping less JavaScript would most likely fix this issue.

To figure out the bundle size of your project and what can be improved, I recommend webpack-bundle-analyzer. After analyzing your bundle, you could find that you have giant package only purpose of which is to make few insignificant changes that could easily replaced with some kind of vanilla solution.

The same concern may be related to animation libraries, which usually have quite significant sizes. If your project is not heavily dependent on complicated animations and/or has bundle size or performance issues, you might consider to partially or fully transfer to CSS animations or even get rid of animations completely. Get your priorities straight: is it really worth using heavy jaw-dropping animations that make most of the low and mid-tear devices lag, overload or overheat? It might or it might not, depending on the project, its purpose and audience.

Fortunately, framer-motion got us covered!

LazyMotion is a very handy component that can help us to reduce bundle size. It synchronously or asynchronously loads some, or all, of the motion component’s features.

Documentation states, that default use of motion component adds around 25kb to the bundle size vs under 5kb for LazyMotion and m components.

Synchronous loading

How exactly can we achieve up to 5x bundle size reduction? With synchronous loading. By wrapping animation component with LazyMotion and passing needed features (domAnimation or domMax) to the features prop. The last step is to replace the regular motion component with its smaller twin – m component.

import { LazyMotion, domAnimation, m } from 'framer-motion';

export const MotionBox = ({ isAnimating }: { isAnimating: booolean }) => (
 <LazyMotion features={domAnimation}>
   <m.div animate={isAnimating ? { x: 100 } : { x: 0 }} />
 </LazyMotion>
);

Asynchronous loading

We can save users a few more KB by using async loading of LazyMotion features.

// dom-max.ts

export { domMax } from 'framer-motion';

// modal.tsx

import { LazyMotion, m } from 'framer-motion';

const loadDomMaxFeatures = () =>
 import('./dom-max').then(res => res.domMax);

export const Modal = ({ isOpen }: { isOpen: booolean}) => (
 <AnimatePresence exitBeforeEnter initial={false}>
   {isOpen && (
     <LazyMotion features={loadDomMaxFeatures} strict>
       <m.div
         variants={ { open: { opacity: 1 }, collapsed: { opacity: 0 } } }
         initial="collapsed"
         animate="open"
         exit="collapse"
       >
         // modal content
       <m.div>
     </LazyMotion>
   }
 </AnimatePresence>
);

📎 AnimatePresence component is not required in this case, but it’s pretty much a necessity for any animations on component unmount. You can learn more about AnimatePresence here.
Modals, accordions, carousels, and pretty much any other animation that requires a user’s interaction can benefit from that.

Bundle size test

I tested how much LazyMotion can decrease bundle size on our live projects (loading features synchronously):

It’s not much, but I’m pretty happy with the results. Considering how little effort it takes to implement, a 5-10KB reduction in bundle size is quite significant.

Layout animations

To automatically animate layout of motion component pass layout prop.

<motion.div layout />

It doesn’t matter which CSS property will cause layout change (width, height, flex-direction, etc) framer-motion will animate it with transform to ensure best possible performance.

import { useCallback, useState } from 'react';
import { motion } from 'framer-motion';

const flexDirectionValues = ['column', 'row'];

export const LayoutAnimationComponent = () => {
 const [flexDirection, setFlexDirection] = useState(flexDirectionValues[0]);

 const handleFlexDirection = useCallback(({ target }) => {
   setFlexDirection(target.value);
 },[]);

 return (
   <div>
     {flexDirectionValues.map((value) => (
       <button
         key={value}
         value={value}
         onClick={handleFlexDirection}
       >
         {value}
       </button>
     ))}
     <div style={{ display: 'flex', flexDirection }}>
       {[1, 2, 3].map((item) => (
         <motion.div layout key={item} transition={{ type: 'spring' }} />
       ))}
     </div>
   </div>
 );
};

At first, I didn’t realize how easy, useful and multifunctional layout animations are, but it’s truly rare!

Shared layout animations

Similarly to layout animations, shared layout animations give us the opportunity to automatically animate motion components between each other. To do it, simply give multiple motion components same layoutId prop.

import { motion } from 'framer-motion';

const bullets = [1, 2, 3];

export const Bullets = ({ currentIndex }: { currentIndex: number }) => {
 return (
   <div className="bullets">
     {bullets.map((bullet, index) => (
       <div key={index} className="bullet">
         <button>{bullet}</button>
         {index === currentIndex && <motion.div layoutId="indicator" className="indicator" />
          )}
       </div>
     ))}
   </div>
 );
};

Take a look at the turquoise dot under the slider’s navigation/bullet button and try to navigate. When a dot is animated by smoothly moving from one bullet to another, it looks like the same element, but it’s actually not!

This particular demo might seem a bit excessive, considering our point of interest here is only one little dot. But it also uses AnimatePresence component to perform exit animation before the component unmounts, which might be extremely useful in so many different use cases. Check out Sandbox demo to see how to use AnimatePresence.

Conclusion
Since first time I used framer-motion (December 2019), it continued to grow and evolve and now this library gives us opportunity to easily bring to life almost any animation.

I feel like with animations it’s really easy to mess up at least some if not all aspects of good UI/UX experience. But framer-motion comes to the rescue with:

Maintaining HTML and SVG semantics
declarative and keyframes animations
considerations to accessibility (MotionConfig + reducedMotion)
bundle size reduction (LazyMotion + m)
layout transitions (layout and layoutId)
scroll triggered (whileInView) and scroll linked animations (useViewportScroll).

From a web developer’s perspective, working with framer-motion is very enjoyable and fun. It might or it might be the same for you, try it out to see for yourself, fortunately, it’s very easy to start with.

At the end of this article, I want to give you one last friendly reminder: animation is fun and exciting, but it is not a crucial element of a great user experience and – if not used intentionally and in moderation – a possible way to make it worse. You could get away with using simple CSS transitions or keyframes and still achieve excellent results without taking away much from your final product.