How can you save your time when developing a rails application? The answer is to use application templates you can build on the basis of simple template our team has recently created. We believe it can be really helpful in your every-day development practice.
<h2 dir="ltr" style="text-align: justify;">What is Rails Application Template?</h2>
Rails Application Template is a basic template for creating Ruby-on-Rails applications. It simplifies the development process when starting a new project and saves your time which can be spent more wisely. Thereby, you can omit all the routine actions and skip to the stages that require you to be more creative and apply your professional skills.
<h2 dir="ltr" style="text-align: justify;">Advantages:</h2>
<ul dir="ltr">
<li style="text-align: justify;">Time-saving. As we've already mentioned, our template saves you from unnecessary work and allows to switch your attention to more interesting tasks.</li>
<li style="text-align: justify;">Easy process of configuring rails gems. You can easily configure our template to fit your needs and add new gems (below, we're describing this process in more details).</li>
<li style="text-align: justify;">Ease of use. This template is really easy-to-use and can be enhanced for your own requirements in a straightforward manner.</li>
</ul>
<h2 dir="ltr" style="text-align: justify;">How to use</h2>
First of all, you should download or clone the template. Then set your ruby version and gemset:
<pre><code class="language-javascript">$ rvm use 2.3.0@myapp --create</code></pre>
When it&rsquo;s done, install rails gem for the gemset:
<pre><code class="language-javascript">$ gem install rails -v 'your_rails_version'</code></pre>
Now you&rsquo;re ready to use our template when creating your application:
<pre><code class="language-javascript">$ rails new myapp -m /path/to/template/bootstrap.rb</code></pre>
That&rsquo;s all! It was quite easy, right? And now you can enjoy your application!
<h2 dir="ltr" style="text-align: justify;">Customization</h2>
The template uses config.yml file for installing and configuring rails gems and other stuff. Below you can find a list of statements able to help you customize your own template.
1) The configuration file consists of several blocks dividing the application generation process into some logic parts.
<pre><code class="language-javascript">rvm: ...
testing: ...
documentation: ...
deploy: ...</code></pre>
2) The main part of each block is gems. So if you want to have more gems in your project just add a new block with a name that corresponds with your appropriate gems block or add your gems to any existing block.
<pre><code class="language-javascript">testing:
&nbsp;&nbsp;gems:
&nbsp;&nbsp;&nbsp;&nbsp;faker: true
&nbsp;&nbsp;&nbsp;&nbsp;rspec-rails:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;group: test, development
&nbsp;&nbsp;&nbsp;&nbsp;factory_girl_rails:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;version: ~&gt; 4.8
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;group: test, development</code></pre>
You can use a true value for a gem that in this case will be added to Gemfile as gem 'faker'
You can also pass version and/or group params and they will be used in Gemfile:
<pre><code class="language-javascript">gem 'factory_girl_rails', '~&gt; 4.8', group: [:test, :development]</code></pre>
3) Each block can run its own runner from runners folder if one exists. There you can put any code you want to execute, i.e.
<pre><code class="language-javascript">create_file '.ruby-version', RUBY_VERSION
create_file '.ruby-gemset', app_name
file '.rvmrc', "rvm use #{RUBY_VERSION}@#{app_name}"</code></pre>
4) If you want to perform some actions after gem is added, i.e. run rails generate rspec:install, put callback to the runner and it will be executed when you need. By convention, callback name depends on gem name and should look like:
<pre><code class="language-javascript">"#{your_gem_name.gsub('-', '_')}_callback"</code></pre>
So the full configuration for rspec-rails looks like:
<pre><code class="language-javascript"># config.yml
testing:
&nbsp;gems:
&nbsp;&nbsp;&nbsp;rspec-rails:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;group: test, development

# runners/testing.rb
def rspec_rails_callback
&nbsp;generate('rspec:install')
end</code></pre>
You can also read our description of this project <a href="https://github.com/agilie/Rails-Application-Template" target="_blank" rel="nofollow noopener">here</a>.
&nbsp;

How can you save your time when developing a rails application? The answer is to use application templates!

Rails Application Template. A basic template for creating Ruby-on-Rails applications

Rails Application Template for Creating Ruby-on-Rails Apps

This is the third part of the article series about our experience of using and adapting the VIPER architecture. In the <a href="https://agilie.com/blog/the-use-and-adaptation-of-the-viper-architecture-on-our-own-example-of-development-part-1">first part</a>, we had discussed the basics of using and adapting the architecture of the VIPER and <a href="https://agilie.com/blog/the-use-and-adaptation-of-the-viper-architecture-on-our-own-example-of-development-part-2">last time</a> we talked about structuring and creating project skeleton for VIPER. It's high time to talk about creating a module in terms of VIPER architecture
Here goes!
Probably, the most time-consuming part of using VIPER architecture is creating lots of additional files and classes. So let&rsquo;s sort it out and first of all see what we should create and why we need it.
<img style="border: none;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631759243.png" alt="" width="512" height="276" />
<h2 dir="ltr" style="text-align: justify;">1. Factory</h2>
The factory is a class responsible for creating a module with parameters (any data needed to be transferred to module we&rsquo;re opening) and completion (a module which opens current one and which has to decide what to do with it). The controller should conform to ModuleInputProtocol.&nbsp;&nbsp;
<pre><code class="language-javascript">&nbsp;func createModule(arguments: NamedValuesType, completion: ModuleCompletionHandler?) -&gt; UIViewController {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let storyboard = UIStoryboard(name: storyboardId, bundle: nil)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let controller = storyboard.instantiateViewController(withIdentifier: initialControllerID)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let moduleInput = controller as? ModuleInputProtocol

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if let moduleInput = moduleInput {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;moduleInput.setupInitialState(withArguments: arguments, completion: completion)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fatalError("\(initialControllerID) moduleInput == nil")

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return controller

&nbsp;&nbsp;&nbsp;}</code></pre>
It should also define storyboardId and initialControllerID
<pre><code class="language-javascript">&nbsp;&nbsp;&nbsp;// MARK:

&nbsp;&nbsp;&nbsp;let storyboardId = "StartScreen"

&nbsp;&nbsp;&nbsp;let initialControllerID = "StartScreenViewController"</code></pre>
<h2 dir="ltr" style="text-align: justify;">2. Storyboard</h2>
Storyboard is a very important class because all the UI elements should be placed here. Moreover, there&rsquo;re a few requirements for storyboard.
<ul style="list-style-type: disc;">
<li dir="ltr">
Initial storyboard controller should have storyboard id, defined in Factory
</li>
</ul>
<img style="border: none;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631773209.png" alt="" width="512" height="181" />
<ul style="list-style-type: disc;">
<li dir="ltr">
Storyboard has to contain an object with custom class name acting as module initializer (e.g StartScreenModuleInitializer)
</li>
</ul>
<img style="border: none;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631786425.png" alt="" width="512" height="159" />
&nbsp;
<h2 dir="ltr" style="text-align: justify;">3. View</h2>
One of the VIPER module parts is the View which means not only UIView but also all the presentation layers including View, ViewController, DataSources, Delegates, Adapters etc. One more important moment is the interaction between View and other parts of the module, namely the Presenter.
And, of course, we should define input and output protocols. So input protocol (ViewInput) defines methods by which the Presenter calls the View and output protocol (ViewOutput) defines how the View calls the Presenter.
<img style="border: none;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631798746.png" alt="" width="512" height="140" />
<h2 style="text-align: justify;">4. Presenter</h2>
This part acts as a mediator between View and the data layer. It communicates with View in two ways using ViewInput and ViewOutput protocols. And the main task is to process the data retrieved and then assign it to the View.
<h2 style="text-align: justify;">5. Interactor</h2>
The interactor is a class responsible for communication between VIPER module and the external &ldquo;world&rdquo;. In this case, Presenter asks for data by InteractorInput protocol. We don&rsquo;t use InteractorOutput here to transfer data to Presenter for asynchronous operations (e.g API calls) because we usually use PromiseKit for them. We will show how we use it in the final part.
<img style="border: none;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631811810.png" alt="" width="512" height="108" />
<h2 style="text-align: justify;">6. Configurator</h2>
This part of VIPER module is responsible for initial module setup and consists of two parts
<ul style="list-style-type: disc;">
<li dir="ltr">
Initializer (ModuleInitializer).
</li>
</ul>
<pre><code class="language-javascript">class StartScreenModuleInitializer: NSObject {

&nbsp;&nbsp;&nbsp;//Connect with object on storyboard

&nbsp;&nbsp;&nbsp;@IBOutlet weak var startscreenViewController: StartScreenViewController!



&nbsp;&nbsp;&nbsp;override func awakeFromNib() {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let configurator = StartScreenModuleConfigurator()

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;configurator.configureModuleForViewInput(viewInput: startscreenViewController)

&nbsp;&nbsp;&nbsp;}

}</code></pre>
StartScreenViewController should be linked to its outlet in storyboard. After loading all UI elements from nib configurator is called to setup all module units (View, Presenter, Interactor).
<ul style="list-style-type: disc;">
<li dir="ltr">
Configurator is the main setup unit.
</li>
</ul>
<pre><code class="language-javascript">class StartScreenModuleConfigurator {



&nbsp;&nbsp;&nbsp;func configureModuleForViewInput&lt;UIViewController&gt;(viewInput: UIViewController) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if let viewController = viewInput as? StartScreenViewController {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;configure(viewController)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;}



&nbsp;&nbsp;&nbsp;private func configure(_ viewController: StartScreenViewController) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let presenter = StartScreenPresenter()

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;presenter.view = viewController

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let interactor = StartScreenInteractor()

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;interactor.weatherService = ServicesAssembly.shared.weatherService

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;presenter.interactor = interactor

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;presenter.router = PresentationAssembly.shared.router

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewController.output = presenter

&nbsp;&nbsp;&nbsp;}

}</code></pre>
As we can see, it creates Presenter and Interactor, assigning all required services to them and connecting them together. The presenter has a reference to Interactor while View refers to Presenter.
Now module is ready to be shown on the screen.
&nbsp;
It looks clear enough, but in reality, it requires a lot of work to create the same files for each module. And on the other hand, too much time is spent for forming VIPER module, whereas similar screens could be easily created using MVC or MVP. Is it possible to find a solution to this problem? Maybe some script could simplify the whole process by doing all this work for us?
Luckily, there is a great solution, namely - <a href="https://github.com/strongself/Generamba">Generamba</a> (created by Rambler Digital Solutions), which allows defining folder structure, files, and the code they contain. So, by using easy command we receive all these files generated automatically! And the only thing we need to do is to implement business logic to the module. Quite easy, right?
Let&rsquo;s take a look at <a href="https://github.com/strongself/Generamba">Generamba</a> in more details.
<h2 style="text-align: justify;">Generamba in practice</h2>
The first step would be Generamba installation. You can achieve this by using &ldquo;gem install generamba&rdquo; command that requires Ruby 2.2 version.
The next step is to set up Generamba in the project. Run &ldquo;<a href="https://github.com/strongself/Generamba/wiki/Available-Commands">generamba setup</a>&rdquo; command in project root to create <a href="https://github.com/strongself/Generamba/wiki/Rambafile-Structure">Rambafile</a> and add required information about project and author such as author name, company name, target name, etc. It&rsquo;s necessary to properly add new files to the project. And don&rsquo;t worry, this file can be modified any time you want.
Now you should add all the templates you&rsquo;re going to use in the project to the Rambafile. For instance:
<pre><code class="language-javascript">templates:
- {name: rviper_controller}
- {name: local_template_name, local: 'absolute/file/path'}
- {name: remote_template_name, git: 'https://github.com/igrekde/remote_template'}</code></pre>
So you can see three different templates:
<ul dir="ltr">
<li style="text-align: justify;">rviper_controller is a shared template. You can see full list <a href="https://github.com/strongself/generamba-catalog">here</a></li>
<li style="text-align: justify;">local_template_name is template located on your computer locally</li>
<li style="text-align: justify;">remote_template_name is a link to template located on the web</li>
</ul>
Then run &ldquo;<a href="https://github.com/strongself/Generamba/wiki/Available-Commands">generamba template install</a>&rdquo; command to install all templates which will be downloaded and added to &ldquo;Templates&rdquo; folder.
And now it&rsquo;s time for the last step that includes the module generating process. Run &ldquo;<a href="https://github.com/strongself/Generamba/wiki/Available-Commands">generamba gen [Module name] [Template name]</a>&rdquo; to generate all files specified in the template.
<img style="border: none;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631829140.png" alt="" width="512" height="207" />
The script was executed successfully and now we can see what has been created:
<img style="border: none;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631840959.png" alt="" width="512" height="197" />
It's a great result! We used our remote template with name <a href="https://github.com/agilie/swift_viper_template">swift_viper_template</a> and got all files generated without any difficulties!
&nbsp;
It's all for now. The final and most interesting part of these series of articles is coming soon. Follow our blog not to miss it!
&nbsp;

This is the third part of the article series about our experience of using and adapting the VIPER architecture.&nbsp;

The use and adaptation of the VIPER architecture

The use and adaptation of the VIPER architecture on our own example of development, part 3

<span style="color: #0d0d0d; font-family: S&ouml;hne, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 16px; text-align: start; white-space-collapse: preserve; background-color: #ffffff;">If you currently earn on mobile apps (or wish to start!), our insightful article will definitely be useful to you.

How to increase mobile app engagement? The question is a top one, for without involving the user in an interaction process you're unlikely to retain him, which leads to fewer earnings ⚡ Interested? Then let's talk about user engagement in mobile apps in great detail  

How to Increase Mobile App Engagement - Complete Guide

This is the second part of the article about our experience of using and adapting the Viper architecture. In the <a href="https://agilie.com/blog/the-use-and-adaptation-of-the-viper-architecture-on-our-own-example-of-development-part-1" target="_blank" rel="nofollow noopener">first part</a>, we discussed the basics, now it's time to talk about structuring and creating project skeleton for VIPER.
<h2 dir="ltr" style="text-align: justify;">General Info</h2>
To simplify the development process and make it more clear, we usually separate classes into different folders and groups such as Constants, Extensions, Services, Models, Presentation. In addition, Extensions could be divided into smaller groups like UIExtensions, Animations, etc., and Models - into DTO, Business, etc. As for Services, we will discuss them below.
As you can see, there is nothing particularly difficult about these groups, but let's take a closer look at the project structure in terms of VIPER architecture.
<h2 dir="ltr" style="text-align: justify;">1. Services</h2>
For the code clarity, services are better to be divided into several groups like Infrastructure and Business. The first group should contain essential services (API service, Settings service, etc), and the second one consists of all services working with data and business logic.
And there is also the main class called Service Assembly that is a shared instance comprising all services in the app e.g. API service, Settings service, business services, etc.
<pre><code class="language-javascript">protocol ServicesAssemblyProtocol {

&nbsp;&nbsp;&nbsp;var application: UIApplication { get }

&nbsp;&nbsp;&nbsp;var apiService: APIService { get }

&nbsp;&nbsp;&nbsp;var weatherService: WeatherService { get }

}</code></pre>
All services are initialized with the required instances of other ones. For example, UserService might need access to API or Database services.
<pre><code class="language-javascript">class ServicesAssemblyImpl: ServicesAssemblyProtocol {

&nbsp;&nbsp;&nbsp;let application: UIApplication

&nbsp;&nbsp;&nbsp;let apiService: APIService

&nbsp;&nbsp;&nbsp;let weatherService: WeatherService



&nbsp;&nbsp;&nbsp;init(application: UIApplication) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.application = application

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;apiService = APIServiceImpl()

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;weatherService = WeatherServiceImpl(apiService: apiService)

}

}</code></pre>
All setup logic for services is generally implemented in AppDelegate since we might need it at the very start.
<pre><code class="language-javascript">&nbsp;&nbsp;&nbsp;func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -&gt; Bool {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Setup services

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ServicesAssembly.setup(application: application)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Setup everything else if needed

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true

}</code></pre>
 <img style="border: none;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631576231.png" alt="" width="512" height="483" />
<h2 dir="ltr" style="text-align: justify;">2. Presentation</h2>
Presentation&nbsp;is a group with all layout logic inside. Let&rsquo;s examine its structure in depth.
PresentationAssembly is a shared class containing references to the presentation layer.
<pre><code class="language-javascript">protocol PresentationAssemblyProtocol {

&nbsp;&nbsp;&nbsp;var router: AppRouterProtocol! { get }

&nbsp;&nbsp;&nbsp;var whisper: InAppNotificationsProvider! { get }

}



class PresentationAssembly: PresentationAssemblyProtocol {

&nbsp;&nbsp;&nbsp;static let shared = PresentationAssembly()

&nbsp;&nbsp;&nbsp;var router: AppRouterProtocol!

&nbsp;&nbsp;&nbsp;var whisper: InAppNotificationsProvider!

&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;func setup(withNavigation navigation: UINavigationController, modules: Array&lt;ModuleFactoryProtocol&gt;, urlScheme: String, services: ServicesAssemblyProtocol) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;router = AppRouterImpl(withNavigation: navigation, modules: modules, urlScheme: urlScheme)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;whisper = InAppNotificationsProviderImpl(withNavigation: navigation)

}

}</code></pre>
&nbsp;
<img style="border: none;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631589098.png" alt="" width="512" height="278" />
Let&rsquo;s consider Application root more carefully.
<h2 dir="ltr" style="text-align: justify;">Application root</h2>
Application root is an entry point to the app. It is called by AppDelegate and responsible for launching an application and all configuration needed before that moment.&nbsp;
<pre><code class="language-javascript">&nbsp;&nbsp;func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -&gt; Bool {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Setup here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Start application

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appRoot = ApplicationRoot(withNavigation: navigationController)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appRoot.start()

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true

}</code></pre>
It sets up every necessary service, router, presentation stuff and chooses a module to show first (log in or main screen, for instance). Application root also contains all existing modules inside in order to know about each of them to be able to create it.
<img style="border: none;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631600777.png" alt="" width="512" height="177" />
<pre><code class="language-javascript">class ApplicationRoot: NSObject {

&nbsp;&nbsp;&nbsp;let modules : Array&lt;ModuleFactoryProtocol&gt; = [

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;StartScreenFactory.shared,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DetailsScreenFactory.shared

&nbsp;&nbsp;&nbsp;]



&nbsp;&nbsp;&nbsp;// MARK:

&nbsp;&nbsp;&nbsp;fileprivate let router: AppRouterProtocol

&nbsp;&nbsp;&nbsp;fileprivate let whisper: InAppNotificationsProvider



&nbsp;&nbsp;&nbsp;init(withNavigation navigation: UINavigationController) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let services = &nbsp;ServicesAssembly.shared

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let presentation = PresentationAssembly.shared

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;presentation.setup(withNavigation: navigation, modules: modules, urlScheme: "viper", services: services)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;router = presentation.router

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;whisper = presentation.whisper &nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;super.init()

}



&nbsp;&nbsp;&nbsp;func start() {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let urn = StartScreenFactory.shared.moduleURN

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;router.pushModule(byUrn: urn, animated: true, completion: { (_) in

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//completion

})

}

}</code></pre>
<h2 dir="ltr" style="text-align: justify;">Application router</h2>
AppRouter contains all routing logic. It is created by Application root and responsible for navigation between modules e.g. push/pop or present/dismiss etc.
<pre><code class="language-javascript">protocol AppRouterProtocol {

&nbsp;&nbsp;&nbsp;var navigationController: UINavigationController { get }

&nbsp;&nbsp;&nbsp;func pushModule(byUrn urn: String, animated: Bool, completion: ModuleCompletionHandler?) &nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;func presentModule(byUrn urn: String, animated: Bool, completion: ModuleCompletionHandler?) &nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;func popToViewController(_ controller: UIViewController, animated: Bool)

&nbsp;&nbsp;&nbsp;func dismissCurrentController(animated: Bool)

}</code></pre>
It&rsquo;s global in general but can be moved to each module or added to some of them depending on the complexity if we want so.
<img style="border: none;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631615470.png" alt="" width="512" height="314" />
As you can see Routing group also contains ModuleFactoryProtocol
<pre><code class="language-javascript">protocol ModuleFactoryProtocol {

&nbsp;&nbsp;&nbsp;/**

&nbsp;&nbsp;&nbsp;&nbsp;* Module URN ( ex. profile:{userID} )

&nbsp;&nbsp;&nbsp;&nbsp;*/

&nbsp;&nbsp;&nbsp;var moduleURN: String { get } &nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;/**

&nbsp;&nbsp;&nbsp;&nbsp;* Create module with arguments

&nbsp;&nbsp;&nbsp;&nbsp;* Returns module root UIViewController, must implement ModuleInputProtocol.

&nbsp;&nbsp;&nbsp;&nbsp;*/

&nbsp;&nbsp;&nbsp;func createModule(arguments: NamedValuesType, completion: ModuleCompletionHandler?) -&gt; UIViewController

}</code></pre>
which defines the way how new module can be created and ModuleInputProtocol
<pre><code class="language-javascript">protocol ModuleInputProtocol {

&nbsp;&nbsp;&nbsp;&nbsp;/**

&nbsp;&nbsp;&nbsp;&nbsp;* Configure module with arguments.

&nbsp;&nbsp;&nbsp;&nbsp;* Calls form Module factory

&nbsp;&nbsp;&nbsp;&nbsp;*/

&nbsp;&nbsp;&nbsp;func setupInitialState(withArguments args: NamedValuesType, completion: ModuleCompletionHandler?)

}</code></pre>
defines the way module could be configured with additional parameters.
Presentation group also contains any additional groups required by the app. For example, InAppNotifications (alerts, toast etc), StyleKit (responsible for styling application if necessary), SocialServices (Facebook, Twitter, etc), and lots of other logic your app may need.
<h2 dir="ltr" style="text-align: justify;">Views</h2>
Views is created for keeping all the custom layouts which are placed just here. Besides, it can include the following groups inside such as Layouts, Cells, Collections, etc.
<h2 dir="ltr" style="text-align: justify;">User stories</h2>
This part consists of all your screens and UI logic and contains every VIPER module that is located here and should include: Factory, Configurator, View, Presenter, and Interactor. 
We will describe the module structure in the next article and right now just say that it may have storyboard or xib file inside if needed.
<img style="border: none;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631628252.png" alt="" width="504" height="512" />
So, to conclude, to simplify finding the specific class or service let&rsquo;s mention that the structure of the project is extremely clear. In addition, it&rsquo;s good practice to keep the group and folder structure the same way. 
In the next - third - part of our article we'll tell you about creating a module in terms of VIPER architecture: units, their responsibilities, etc.
Read our blog to know more!
&nbsp;

This is the second part of the article about our experience of using and adapting the Viper architecture.&nbsp;

Structuring and creating project skeleton for VIPER architecture

The use and adaptation of the VIPER architecture on our own example of development, part 2

When thinking about launching a mobile app, it's important to understand how to reduce software development costs.

Imagine: you want to create a mobile app but your development budget is limited 

How to Reduce App Development Cost

In this article, we want to share with you our experience of using and adapting the architecture of the Viper by describing our own example of development. And today we're going to discuss the basics&hellip; &nbsp;
Many developers face an issue when code becomes hard to read, debug and fix bugs. Classes become huge together with adding features and development turns to infinite &ldquo;bugfixing&rdquo;. That&rsquo;s why it&rsquo;s important to choose proper software architecture before developing an application, otherwise, it will consume much time to maintain and improve. As a result, it will help to save time and efforts, so proper architecture is the first step to success!
<h2 style="text-align: justify;">Perfect architecture</h2>
Quality architecture should meet the following requirements:
<ol dir="ltr">
<li style="text-align: justify;">The effectiveness of performing the assigned tasks. If designed architecture performs the tasks poorly and doesn't fit into the requirements of functionality, stability, performance, and development time, it can hardly be called a good one.</li>
<li style="text-align: justify;">Well readable and understandable code. First and foremost, a code should be clear and properly structured.</li>
<li style="text-align: justify;">The scalability and flexibility of the system. A good architecture allows you to painlessly add new entities and functions, as well as make changes to existing functionality.</li>
</ol>
However, there is no reason to reinvent the wheel and spend a lot of time developing a completely unique architectural pattern. It's much easier to use the existing one.
There&rsquo;re several most famous architectures named MVC, MVP, MVVM, VIPER. Let&rsquo;s probe deep into each of them.
<h2 dir="ltr" style="text-align: justify;">MVC (Model View Controller)</h2>
MVC is the most simple architecture Apple recommends.
<img style="border: none; width: 512px; height: 208px;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631376053.png" alt="^56BDEBB44AF88BAB8B39A1A9F8FC649A23FC487FB5D45024D5^pimgpsh_fullsize_distr.png" />
The basic idea of MVC architecture is to split up all the elements (fragments) of the code into three separate units: the Model (domain data or a data access layer), the View (user interface) and the Controller (interface between Model and View). MVC allows each block to be controlled independently of the two others, and it greatly simplifies and systematizes the development process.
MVC implies that the Model manipulates data and provides it to the Controller that renders the View. And the View remains stateless just displaying data of the Model to a user.
However, the described model may not work perfectly in all conditions. And in reality, the View and the Controller often become a single unit looking like this:
<img style="border: none; width: 512px; height: 61px;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631386327.png" alt="2.png" />
So, ViewController transforms into the Massive View Controller forced to handle almost all the processes itself. And the main task for developers, in this case, is to offload it.
<div>
<h2 dir="ltr" style="text-align: justify;">MVP (Model View Presenter)</h2>
It turned out that in some cases MVC architecture is not working as effectively as one expects (for the reasons described above). So there was MVP pattern designed, having become a bit improved version of MVC. 
The difference between MVC and MVP is the Presenter acting as the mediator between the View (actually ViewController) and the Model. The Presenter significantly unloads the ViewController by moving business logic to the Presenter, so the ViewController is only responsible for the layout and its lifecycle.
<img style="border: none; width: 512px; height: 199px;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631396862.png" alt="" />
This architecture makes it easier to mock the View, the Presenter and the Model that leads to better testability of the code which is an obvious advantage of MVP.
<h2 dir="ltr" style="text-align: justify;">MVVM (Model View ViewModel) </h2>
Another popular pattern is MVVM (Model View ViewModel). It looks similar to MVP architecture, but instead Presenter it has ViewModel between the View (view controller) and the Model (data).
<img style="border: none; width: 512px; height: 43px;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631408723.png" alt="3r.png" />
The important difference of this model from the MVP is that ViewModel doesn&rsquo;t refer to View, it works directly with model updating it with user interactions from View and receives updates from Model updating only itself (not View). View can receive updates using observer if needed. So ViewModel prepares the data for View that unloads controller.
<div>
<h2 dir="ltr" style="text-align: justify;">VIPER</h2>
The last architecture we will talk about is VIPER. It&rsquo;s a very effective architecture pattern, in fact, the first one that cares about navigation (routing) between modules.
It consists of 5 parts: View, Presenter, Interactor, Entity, Router.
<ul dir="ltr">
<li style="text-align: justify;">The view is the ViewController. The View&rsquo;s waiting for the Presenter to transmit the content and display it to a user; it never requests the data from the Presenter.</li>
<li style="text-align: justify;">Presenter prepares data for the View. It gathers data from user interactions and can send requests to the Interactor. The Presenter also gets results from the Interactor and convert the results to a state being most effective to display on the View.</li>
<li style="text-align: justify;">Interactor (a new unit) contains the business logic and networking for managing objects (Entity) to perform a specific task.</li>
<li style="text-align: justify;">Entity is the objects managed by the Interactor. So it&rsquo;s actually a model.</li>
<li style="text-align: justify;">Router (another new unit) is responsible for segues between modules.</li>
<li style="text-align: justify;">Data Store (e.g., web service, database) provides the Entity to the Interactor. Applying its business logic, Interactor selects the Entity from the data store, manages it and then returns it in an updated form back to the datastore.</li>
</ul>
<img style="border: none; width: 512px; height: 196px;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631418693.png" alt="4.png" />
VIPER module is a user story that can be represented either as one screen or as a whole story. The good example is a registration flow consisting of several screens such as SignUp, Confirmation, etc.
Each module being an independent part requires an additional unit able to manage the entire process. This role is played by the Configurator which task is not only to create a module but also provide it with all necessary Services and information.
<h2 dir="ltr" style="text-align: justify;">Improving and Simplifying VIPER at the same time</h2>
VIPER architecture was reliable and usable from the outset, but <a href="https://github.com/strongself/The-Book-of-VIPER" target="_blank" rel="nofollow noopener">Rambler Digital Solutions</a> has improved and simplified it even more. Let&rsquo;s take a look at the main changes:
<ol dir="ltr">
<li style="text-align: justify;">Assembly functions which Wireframe was responsible for are moved to Configurator now. So, after this modification, Wireframe is in charge of Routing and nothing else.</li>
<li style="text-align: justify;">The router has become global</li>
<li style="text-align: justify;">All data transfer is executed according to ModuleInput and ModuleOutput protocols</li>
<li style="text-align: justify;">View is not only ViewController now; it acts as a presentation layer containing several parts (View, DataSource&rsquo;s. Delegate&rsquo;s, etc.)</li>
<li style="text-align: justify;">A new service layer has been added to a module with dependency injection into interactor. Thanks to this improvement a module interacts just with required services (they make networking, storing, collecting, etc.).</li>
</ol>
Thus, the VIPER is quite a useful architectural system, allowing to distinguish all of the logic, so that every class performs only actions it is responsible for.
<img style="border: none; width: 512px; height: 240px;" src="https://d12zh9bqbty5wp.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1676631429726.png" alt="6.png" />
This is the first part of our article about using and adapting the Viper architecture. In the <a href="https://agilie.com/blog/the-use-and-adaptation-of-the-viper-architecture-on-our-own-example-of-development-part-2" target="_blank" rel="nofollow noopener">second part</a>, we're going to discuss structuring and creating project skeleton for VIPER.
Follow our blog to learn more about the architecture of VIPER!
</div>
</div>

In this article, we want to share with you our experience of using and adapting the architecture of the Viper.&nbsp;&nbsp;

General info about software architectures

The use and adaptation of the VIPER architecture on our own example of development, part 1

In this article, we'll tell you how much money you can make with an app and describe the most popular and effective monetization methods.

If you're wondering how free apps make money, our article is meant for you. You'll find here detailed information on the average app revenue and popular monetization strategies

How Much Money You Can Make with an App

Mobile design goes beyond simply looking stylish and engaging users with bright colors and fun illustrations. User-oriented and innovative features play an equally important role. To make sure your app design stays relevant in terms of both style and user experience, it's important to stay up-to-date on current app design trends and use best practices.&nbsp;
Meanwhile, the introduction of conversational interfaces and personal assistants of different kinds doesn&rsquo;t mean we&rsquo;re ready to abandon more customary user interface patterns.
In this article, we&rsquo;ll try to analyze what&nbsp;<a href="https://agilie.com/expertise/technology/ui-ux-design">mobile app design</a>&nbsp;trends that buzzword the beginning of 2024 will - hopefully - live up to the end of the year and will actually mean something for product design and human-computer interaction in general.
Here&rsquo;s what we see as the most interesting mobile design trends for the year 2024.
More material design applications including:
<ul>
<li>Experimenting with material trends such as card interfaces</li>
<li>Meaningful transitions</li>
</ul>
Detours from material design principles like:
<ul>
<li>Less flat-ish feel</li>
<li>More color diversity</li>
<li>Icons going back to thin outline</li>
</ul>
Experimenting with UI patterns:
<ul>
<li>Alternative UI patterns instead of hamburger-like menus</li>
<li>Exploration of various prototyping tools</li>
<li>Mobile-first orientation of web apps</li>
</ul>
Adapting mobile design to new means of interactions such as:&nbsp;
<ul>
<li>Сonversational interfaces</li>
<li>AR and VR</li>
</ul>
Let's look at the main trends of mobile applications for iOS and Android in 2024 - forewarned means armed.
<div id="form-description" class="form-description" data-title="Key takeaways" data-text="Even with the claims of some that the trends are only temporary, our experience suggests otherwise. There are certainly UI/UX trends that have moved into the permanent category, such as dark mode or the use of real photos, which are now considered common practice. It is important to realize that trends that become best practices remain relevant for a long time, so adopting them early makes you an innovator, or at least attracts the attention of users.

For instance, use AR to create functional user interfaces that allow customers to try out furniture, for example, before buying it. Or imagine that your mobile app allows users to try on clothes to see how they will look before buying - augmented reality can be the perfect tool to make the shopping process even more interactive.">
<div class="form-description-title">Key takeaways</div>
Even with the claims of some that the trends are only temporary, our experience suggests otherwise. There are certainly UI/UX trends that have moved into the permanent category, such as dark mode or the use of real photos, which are now considered common practice. It is important to realize that trends that become best practices remain relevant for a long time, so adopting them early makes you an innovator, or at least attracts the attention of users. For instance, use AR to create functional user interfaces that allow customers to try out furniture, for example, before buying it. Or imagine that your mobile app allows users to try on clothes to see how they will look before buying - augmented reality can be the perfect tool to make the shopping process even more interactive.</div>
<h2 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; line-height: 30px; font-size: 26px; color: #262b33; font-family: sans-serif;">1. More material design and a step off from flat</h2>
Google&rsquo;s material design had made it from a hot trend in 2015 to an app industry standard in 2016. As for now, however, the material design principles are not considered as some kind of dogmas by UI/UX designers. Material 3 marks the latest release of Google's open-source design system. You can utilize Material 3 to design and develop products that are visually appealing and user-friendly. In 2023 these principles work rather as road signs to show the general direction user flow and layouts should take to deliver the best user experience.
For example, card-based UI turned out to be an ideal way to deliver information and content in mobile apps. Card-based interfaces help organize large amounts of different content easily, just splitting it into accessible chunks. The different kinds of card layouts had been constantly in the highlight throughout 2020 and 2022, and don&rsquo;t seem to be going anywhere in 2024.
<img style="width: 796px; height: 595px;" src="https://d12zh9bqbty5wp.cloudfront.net/ckeditor_assets/pictures/257/content_cards_jpg.jpg" alt="cards layout" />
<a href="https://dribbble.com/shots/3209261-Pro-Timetracker-Debut-on-Dribbble" target="_blank" rel="nofollow noopener">Time tracker app</a> concept using the purely card-based interface.
Another tendency is fusing more complex graphic elements and effects into simplistic flat-inspired material design. No, skeuomorphism isn&rsquo;t back (not yet, at least), but some of its distinctive elements, like shadows or translucent elements, are enjoying more attention from UI designers.
<h2 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; line-height: 30px; font-size: 26px; color: #262b33; font-family: sans-serif;">2. Brutalism</h2>
Brutalism is one of the latest trends in application design. This style is guaranteed to add expressiveness to your design. Brutalist UI design features include a black-and-white color palette, bold typography, and heavy use of photography inspired by the architectural style of the 1950s.
Brutal design can be less "clean" compared to other styles: fonts are often a bit hard to read, elements and typography can appear tightly spaced and are characterized by sharp edges. Therefore, not every project can use brutalism, and you should make sure that your audience understands and appreciates this refined approach. If your target audience is young people, and your project is focused on art and creativity, why not?
<img style="width: 800px; height: 600px;" src="https://d12zh9bqbty5wp.cloudfront.net/ckeditor_assets/pictures/258/content_flash_garage.gif" alt="flash garage" />
<a href="https://dribbble.com/shots/2896331-Flash-Garage-concept" target="_blank" rel="nofollow noopener">Gadget</a><a href="https://dribbble.com/shots/2896331-Flash-Garage-concept" target="_blank" rel="nofollow noopener"> battery management app</a> concept uses black as a theme color which contrasts with functional UI elements.
Meanwhile, more calm, minimalistic color palettes aren&rsquo;t going anywhere, either. Altogether, this means we&rsquo;ll see a much wider range of visual solutions this year.
<img style="width: 800px; height: 600px;" src="https://d12zh9bqbty5wp.cloudfront.net/ckeditor_assets/pictures/259/content_taxico.gif" alt="taxi app design concept" />
<a href="https://dribbble.com/shots/3219922-TAXICO-taxi-for-kids" target="_blank" rel="nofollow noopener">Taxico app</a> concept features a calm color palette.
<h2 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; line-height: 30px; font-size: 26px; color: #262b33; font-family: sans-serif;">3. Animation</h2>
<p id="isPasted" style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; caret-color: #414141; color: #414141; font-family: sans-serif; font-weight: 500; text-align: left; font-size: 1rem !important;">Animation remains a trend in program design, attracting the attention of users for its interest and effectiveness. From micro-interactions to full-scale illustrations, witty animations always add a fun layer to the user interface.
Let Agilie create not only fun but an effective UI/UX design for you! Tell us about your project, and we'll take care of all the details.
The possibilities are endless when it comes to animation styles and approaches. You can experiment with typography, add custom artwork to input screens, or simplify app navigation. Pay attention to the 3D design trend: claymorphism, which combines the physicality of clay with the interactivity of modern interfaces, is becoming one of the most popular trends in 2023. This style gives a sense of playfulness and nostalgia, and also promotes a more active interaction with the user.
With the introduction of 5G, designers no longer need to worry about slow internet, opening up opportunities to implement more complex ideas in the field of animation in 2023.
<h2 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; line-height: 30px; font-size: 26px; color: #262b33; font-family: sans-serif;">4. Microinteractions</h2>
Microinteractions have become not just a trend in the design of UX applications, but already a mandatory practice for any digital design. These small interactions, such as button animations or sound notifications, make the user experience more natural and interactive. They add fun and individuality to the interface, giving it a unique character.
Microinteractions can include various elements such as movement, animation, sound effects, or even haptic feedback. In particular, they use visual cues that are clear and intuitive to provide feedback between the user and the interface. This helps bridge the gap between physical and digital perception and provides a responsive experience for users.
Microinteractions are small but important UX elements that make an app easier to navigate and more user-friendly. They also add to the overall mood of the app and contribute to branding through small animated details. At the same time, it is important not to overload the user with too many microinteractions to avoid overload.
<img style="width: 800px; height: 600px;" src="https://d12zh9bqbty5wp.cloudfront.net/ckeditor_assets/pictures/634/content_content_10_tomplay.gif" alt="animated icons design trends" width="800" height="600" />
Animated icons for <a href="https://www.behance.net/gallery/34364779/Tomplay-interactive-sheet-music" target="_blank" rel="nofollow noopener">Tomplay</a>, an interactive sheet music app.
<h2 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; line-height: 30px; font-size: 26px; color: #262b33; font-family: sans-serif;">5. Alternative UI patterns</h2>
Today, many designers see the hamburger menu - the menu we all are so accustomed to - to be a controversial UI pattern, which has its pros and cons. It surely helps to structure in-app navigation, considering the small amount of space mobile devices provide. But it also appears that not all users even realize those three horizontal lines are a significant navigation element, and using the hamburger-like hidden drawers can&nbsp;<a href="https://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/#.tnw_z465gJHf">seriously reduce</a>&nbsp;user engagement.
Now, designers try out various&nbsp;<a href="https://www.justinmind.com/blog/hamburger-menu-alternatives-to-mobile-uis-most-controversial-pattern/">alternatives to the hamburger menus</a>&nbsp;like using more contextual and intuitive hidden navigation elements, placing navigation in tabs, adding floating action buttons, and experimenting with iOS&rsquo;s 3D-touch technology, allowing users to peek on hidden menu elements.&nbsp;
Which of these patterns will become the next mobile UI trend is yet to be seen.
<h2 style="text-align: justify;">6. Interaction experimenting&nbsp;</h2>
And here appears the question: how to find the interaction patterns that appeal to users best? Why not try experimenting? The new prototyping tools appear now more often than any time before, and each of them offers some new possibilities to professional UI/UX designers in means of building, presenting, and testing new interactions, user flows, and combinations of interactions.
We at Agilie have tried different prototyping tools including&nbsp;<a href="https://www.sketchapp.com/">Sketch</a>,&nbsp;<a href="https://www.protopie.io/">ProtoPie</a>,&nbsp;<a href="http://www.adobe.com/products/experience-design.html">Adobe XD</a>&nbsp;and others, and we&nbsp;<a href="https://dribbble.com/shots/3293259-Hoteller-motion-prototype-ProtoPie">keep experimenting</a>&nbsp;and building concepts in order to the most simple and user-friendly product design solutions.
<h2 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; line-height: 30px; font-size: 26px; color: #262b33; font-family: sans-serif;">7. Conversational interfaces</h2>
Personal assistants and chatbots were indeed the technology trends of which everyone spoke throughout 2022. Now, it&rsquo;s time to figure out the best way to connect people with data-driven algorithms by creating capable conversational interfaces, whose usability and functionalities extend far beyond the abilities that regular personal assistants have now.&nbsp;
Imagine the &ldquo;assistant-as-app&rdquo;, an interface messenger-like that can accomplish sophisticated tasks through a natural dialogue with you. And this is only one example of what UI/UX designers can do by employing machine learning and natural language processing (NLP) technologies to build the most convenient human-computer interactions.
<img style="width: 800px; height: 450px;" src="https://d12zh9bqbty5wp.cloudfront.net/ckeditor_assets/pictures/263/content_siri-search1.jpg" alt="conversational interfaces" />
<h2 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; line-height: 30px; font-size: 26px; color: #262b33; font-family: sans-serif;">8. Anticipatory design</h2>
Chatbots are not the only way to effectively use data-driven algorithms for providing better services and products. As&nbsp;<a href="https://en.wikipedia.org/wiki/Hick%27s_law">Hick&rsquo;s law</a>&nbsp;suggests, the wider the choice lies before the user, the more time and effort it would require for them to make a choice. Too many choices lead to decision fatigue, and in the case of user experience design, it may be fatal: people just won&rsquo;t waste their time and effort on making choices. As the solution to this problem, there is the concept sometimes dubbed as&nbsp;<a href="https://medium.com/digital-experience-design/a-radical-mindshift-in-ux-anticipatory-design-390e457e4db8#.oixx2b8xp">anticipatory design</a>.
Anticipatory design implies utilizing user behavior data to predict people&rsquo;s choices even before they realize they need to make them. The goal of the anticipatory design is to provide apps with more contextual awareness and narrow down user&rsquo;s choices to one option -&nbsp;the one&nbsp;they need at the exact moment. While this might sound a little dystopian, contextually aware apps can provide much more value to users and make the human-computer interaction as simple as never before.
<h2 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; line-height: 30px; font-size: 26px; color: #262b33; font-family: sans-serif;">9. Further exploration of VR and AR</h2>
Virtual and augmented reality have been around for a long time, but we can expect these technologies to become even more important and true UX design trends in 2023. You may be asking why? Apple gave us a few pointers on its own VR/AR headset. And as we all know, when Apple creates something new, it instantly becomes a trend.
Augmented reality is one of the most exciting mobile app design trends in 2023 because it doesn't require any additional hardware, but has incredible effects. For example, users can see a virtual catwalk when choosing clothes or evaluate how the furniture looks in their room. And this is not to mention the potential of AR in the gaming industry.
Over 60% of mobile app developers are using virtual reality (VR) in their designs.
As an alternative, it&rsquo;s pretty possible VR and AR might fit their own niche, just like did wearables - another long-standing inhabitant of various trend lists.
<img src="https://d12zh9bqbty5wp.cloudfront.net/ckeditor_assets/pictures/3787/content_content_content_design_trends_vr_1.jpg" alt="VR" width="800" height="533" />
<h2 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; line-height: 30px; font-size: 26px; color: #262b33; font-family: sans-serif;">10. More responsive websites</h2>
Finally, web browsing has become an integral part of any mobile device user&rsquo;s life.&nbsp;
<a href="https://www.brawnmediany.com/blog/the-crucial-role-of-mobile-friendly-website-design-in-2023/">Google's move to mobile-first indexing</a>&nbsp;is revolutionizing the rules in the SEO world. This means that Google prefers mobile versions of websites when determining search engine rankings. This change is logical, given that a significant part of Internet traffic is now generated from mobile devices. If your website isn't mobile-optimized, it may not rank well in search results, potentially resulting in less regular traffic.
In order to maintain and improve your website's search engine visibility, it is extremely important to have a responsive design that provides an effective look and functionality on mobile devices. A mobile-friendly website will help you stay competitive in search engine rankings.
And as the market goes mobile-first, designers must answer to this by building responsive websites that work, look, and feel consistent on mobile screens just as they are on desktops.
Year after year, the direction which mobile design trends take doesn&rsquo;t change drastically, but the trends themselves grow in detail and adjust to people&rsquo;s and the market&rsquo;s current needs and technological trends. Which trends from our today&rsquo;s top we&rsquo;ll see in the best app design 2024? Only time will show.

In this article, we&rsquo;ll speak about&nbsp;what we see as the most interesting mobile design trends for this&nbsp;year.

Mobile design trends 2017: material design, alternative UI patterns, anticipatory design, AR and VR and more.

Top 10 Mobile App Design Trends 2017

Blockchain has become a paradigm shift that changes the operations of different industries. Nevertheless, like any other disruptive technology, a lot of myths and misconceptions have appeared. We should differentiate between fact and fiction to use blockchain technology effectively and responsibly. We can better understand what blockchain is (and isn&rsquo;t), how it functions, and the varied applications it holds besides cryptocurrencies by clarifying these misconceptions.
<div id="form-description" class="form-description" data-title="Key Takeaways" data-text="Blockchain is not just about Bitcoin; it is the technology that can transform different fields. 

Blockchains are strong but not flawless, and being aware of the possible weak sections is a very important thing in keeping the network safe.

Educational investment and partnerships with software development experts are the main factors for businesses that will use blockchain technology.">
<div class="form-description-title">Key Takeaways</div>
<ul style="text-align: justify;">
<li dir="ltr" aria-level="1">
Blockchain is not just about Bitcoin; it is the technology that can transform different fields.&nbsp;
</li>
<li dir="ltr" style="text-align: left;" aria-level="1">
Blockchains are strong but not flawless, and being aware of the possible weak sections is a very important thing in keeping the network safe.
</li>
<li dir="ltr" aria-level="1">
Educational investment and partnerships with software development experts are the main factors for businesses that will use blockchain technology.
</li>
</ul>
</div>
<h2 dir="ltr" role="presentation">&nbsp;Myth 1: Blockchain and Bitcoin Are the Same</h2>
Among the most common myths about blockchain technology is the confusion between the blockchain and Bitcoin. Blockchain and Bitcoin were created simultaneously, so they are widely believed to be the same thing. However, we must understand that blockchain is a much broader term. It is the technology that created Bitcoin. While Bitcoin is indeed the first and most famous application of this technology, equating the two is like saying that Google is the Internet.
Blockchain is a decentralized digital ledger technology (DLT) that records transactions across multiple computers so that the records cannot be altered retroactively, without the alteration of all subsequent blocks and the consensus of the network.
This makes blockchain a naturally secure and transparent method of data and transaction recording.&nbsp;
Bitcoin is a type of digital currency based on blockchain technology and used for secure, anonymous, and decentralized financial transactions. The blockchain of Bitcoin acts as a public ledger for all the transactions in the Bitcoin network, thus, it is possible to transfer digital currency securely without the use of intermediaries like banks or governments.&nbsp;
Blockchain technology can be much broader than purely financial transactions. It can be used in different industries with various aims. Nowadays, many businesses are studying how blockchain can improve their operations (read more about <a href="https://agilie.com/blog/enterprise-blockchain-development-how-businesses-derive-benefits" target="_blank" rel="noopener">enterprise blockchain development</a> and <a href="https://agilie.com/blog/enterprise-blockchain-development-how-businesses-derive-benefits" target="_blank" rel="noopener">enterprise-grade blockchain development</a>).

Here are a few examples:
Healthcare: Blockchain can guarantee the safety of medical records storage and sharing. Thus, they are only available to authorized personnel and patients and lead to quicker diagnosis and treatment.​
Financial Services: Blockchain is a viable solution for international payments, real-time settlements, and improving transaction transparency and security.
Digital Identity:&nbsp; Blockchain can correct identity theft and fraud by adding digital identities that cannot be changed. For example, Estonia's e-Residency program is the first of its kind, a government-issued digital identity that allows entrepreneurs from anywhere in the world to operate and conduct business online in the EU.
Real Estate: Blockchain can simplify property transactions such as sales, leasing, and financing by reducing paperwork and improving transparency.
<a class="incut--wrap" style="transition-delay: 0s;" href="https://agilie.com/blog/the-evolution-of-blockchain-from-bitcoin-to-business-applications" target="_blank" rel="noopener" aria-label="incut"><img style="height: 344px; width: 778px;" src="https://d3pxw3l8cozu05.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1716280829344.png" width="100%" height="100%" />Learn more about the evolution of Blockchain from Bitcoin to business applications.</a>
<h2 dir="ltr">Myth 2: Blockchain Transactions Are Always Anonymous</h2>
A frequent mistake people make about blockchain technology is that it is automatically anonymous to its users. However, the truth is more nuanced. Blockchain transactions are not strictly anonymous but pseudonymous.
Pseudonymity means that a user's identity is not directly tied to their blockchain transactions but rather to a digital pseudonym, typically a public key or a blockchain address. These addresses are like a sequence of letters and numbers, giving privacy but not total anonymity.
In contrast, anonymity would mean that the transactions are entirely disconnected from any identity, even a pseudonym, making them untraceable to the user. Blockchain does not usually provide this level of anonymity because the transaction history of each blockchain address is visible to anyone who accesses the blockchain.
Most blockchains are open ledgers, meaning that all transactions are visible to anyone who wishes to view them. This level of transparency ensures that while users' identities are not directly exposed, their transaction histories and patterns can be analyzed.<span style="font-size: 11pt; font-family: Roboto, sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-alternates: normal; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-position: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> 
<img src="https://d3pxw3l8cozu05.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1716280901953.png" />
While basic blockchain transactions offer pseudonymity, several enhancements and tools can increase privacy:
1. Mixing Services: Services like CoinJoin allow multiple users to combine their transactions into a single transaction with multiple inputs and outputs. This mixing blurs the traceability of any single coin, making it more difficult to link wallets with identities.
2. Privacy-Focused Cryptocurrencies: Some cryptocurrencies, like Monero and Zcash, are designed specifically to enhance privacy. Monero uses ring signatures and stealth addresses to hide the transactions&rsquo; origins, amounts, and destinations. Zcash allows users to shield transactions completely through its zk-SNARKs technology, which enables transactions to be verified without revealing the sender, receiver, or amount.
3. Use of Multiple Addresses: Users can increase their privacy by using multiple wallets or addresses, dispersing their transactions across several points, which makes it more challenging to link them to a single identity.
<a class="incut--wrap" style="transition-delay: 0s;" href="https://agilie.com/blog/blockchain-tech-trends-how-to-stay-ahead-of-the-curve" target="_blank" rel="noopener" aria-label="incut"><img style="height: 344px; width: 778px;" src="https://d3pxw3l8cozu05.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1716280997458.png" width="100%" height="100%" />Explore key blockchain technology trends and stay ahead in its innovation with insights and practical examples.</a>
<h2 dir="ltr">Myth 3: Blockchains Are Unhackable</h2>
The idea that blockchains are completely unhackable is a frequently held misconception that can cause a dangerous level of complacency in security measures. While blockchain technology does offer robust security features, it is not immune to vulnerabilities. Knowing the security features employed and the situations in which breaches happen is very important for anyone who wants to use blockchain for their business.
Blockchain technology secures data through several mechanisms:
Cryptography: Every transaction on a blockchain is secured using cryptographic algorithms, which ensure that data can neither be altered nor read without the appropriate cryptographic key.
Decentralization: By distributing copies of the ledger across a network, blockchain reduces the risk of a single point of failure that could compromise the entire system.
Consensus Protocols: Blockchains use various consensus mechanisms, like Proof of Work (PoW) or Proof of Stake (PoS), to agree on the validity of transactions. These protocols prevent a malicious actor from changing even a single aspect of the blockchain.
<a class="incut--wrap" style="transition-delay: 0s;" href="https://agilie.com/expertise/fintech/blockchain-software" target="_blank" rel="noopener" aria-label="incut"><img style="height: 344px; width: 778px;" src="https://d3pxw3l8cozu05.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1716281102044.png" width="100%" height="100%" />Learn more about our blockchain software development services.</a>
Despite these security measures, there are scenarios where blockchains can and have been compromised.
<h3 dir="ltr">Scenarios Under Which Breaches Have Occurred</h3>
51% Attacks: This type of attack happens when a single entity gains control of more than 50% of the network&rsquo;s mining hash rate or stake, allowing them to manipulate transactions and potentially double-spend coins.&nbsp;
Code Vulnerabilities: <a href="https://agilie.com/blog/secure-smart-contract-design-best-practices-in-solidity-programming" target="_blank" rel="noopener">Smart contracts</a>, which are self-executing contracts with the terms directly written into code, can contain vulnerabilities. One of the most famous incidents is the DAO attack on the Ethereum network. Hackers exploited a vulnerability in the DAO (Decentralized Autonomous Organization) smart contract code to siphon off one-third of the DAO&rsquo;s funds.
Phishing and Social Engineering: End-user security is often the weakest link in a blockchain system. Phishing attacks can allow attackers access to blockchain assets, bypassing network security measures, to steal private keys or wallet credentials.
<img src="https://d3pxw3l8cozu05.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1716281254703.png" />
<h2 dir="ltr" style="text-align: justify;">Conclusion</h2>
The blockchain technology is often seen as highly popular and muddled at the same time.&nbsp; Falsified myths are only part of the misconceptions that can mislead such a fantastic technology. Similarly, proper professional knowledge and strategy can help blockchain perform to its potential in various fields.&nbsp;<a href="https://agilie.com/blog/your-own-cryptocurrency-from-scratch-everything-you-need-to-know-to-create-your-cryptocurrency" target="_blank" rel="noopener">Building your own cryptocurrency</a> can be a strategic move for businesses seeking to innovate and tap into new digital markets.
At <a href="https://agilie.com" target="_blank" rel="noopener">Agilie</a>, we understand that dealing with a complex environment is also a significant challenge. This is why we create powerful blockchain systems and wish to educate our clients regarding the breadth of blockchain-utilizing services. Therefore, such solutions can be tailored to your industry's concrete necessities and problems.
<a class="incut--wrap" style="transition-delay: 0s;" href="https://agilie.com/contacts" target="_blank" rel="noopener" aria-label="incut"><img style="height: 344px; width: 778px;" src="https://d3pxw3l8cozu05.cloudfront.net/images/f9e66e179b6747ae54108f82f8ade8b3c25d76fd30afde6c395822c530196169-1716281316627.png" width="100%" height="100%" />Contact us to find out how our blockchain development services can help you achieve your goal.</a>

Discover the truths about blockchain technology as we debunk common myths and clarify its applications to empower businesses with informed integration.

Discover the truths about blockchain technology as we debunk common myths and clarify its applications to empower businesses with informed integration.

Blockchain Myths Debunked: Separating Fact from Fiction | Agilie

Discover the factors that influence fintech app development costs.

Learn about the factors that influence fintech app development costs.

Guide on How to Develop a Fintech App with Features and Costs | Agilie

Analyze the main requirements and legal regulations to overview starting a fintech business in the USA.

Analyze the main requirements and legal regulations to overview starting a fintech business in the USA.

4 Things to Know About Fintech Requirements in the USA | Agilie

Learn about the SDLC vs. Agile product development specificity and their core differences.

Learn about the SDLC vs. Agile product development specificity and their core differences.

SDLC vs. Agile Development: Key Differences | Agilie

Explore how to hire financial software developers to build unique fintech applications per businesses needs.&nbsp;

Explore how to hire financial software developers to build unique fintech applications per businesses needs. 

How to Hire Financial Software Developers | Agilie

Learn about the property management software features. Gain insights on how PMS automates rent collecting, optimizes operations, and maximizes ROI.

Learn about the property management software features. Gain insights on how PMS automates rent collecting, optimizes operations, and maximizes ROI.