Rokkey

Introduction to React Native

info@rokkey.com — Sat, 26 Dec 2020 00:00:00 GMT

What is React Native? When is it used? And why has it become so popular in the design and development of mobile apps? These are the questions that we’ll answer in this article.

Introduction to React Native

React Native is a JavaScript framework for developing mobile apps that can run locally on both Android and iOS.

It is based on ReactJS, which was developed in Facebook, and is a component-based framework also used to develop web user interfaces.

Both ReactJS and React Native are two of the most popular repositories on GitHub.

If you are familiar with ReactJS you can easily switch to React Native where the same libraries can be used across both platforms.

React Native was launched in 2015 and quickly swept the world of mobile device development.

Having a mobile app is extremely important to many companies in the digital world we live in. Deciding which platform to use to develop your app can be difficult.

You might have heard of React Native, Flutter, lonic, or Cordova. First we need to distinguish between two terms “Hybrid” and “Cross-platform” . One thing to note that both are used to build an iOS and Android app from a single code base.

Hybrid App Development

Developers write the code using (HTML, CSS, and JavaScript) and this code converts into a native app using plugins like Apache Cordova or Ionic’s Capacitor. The plugin system allows developers to access the native features of platforms.

Because of the multiple layers of mediation, it does not perform well especially when the application gets too big.

Cross-platform App Development

Developers write the code using a single codebase like (JavaScript, Dart, C and C#) through a bridge engine the code is converted to a native code like Swift and Java so the developers are able to continue development natively. In other words, it offers more robust and close to native user experience and a way better option than Hybrid.

Why is React Native Important?

With React Native Framework, it proved effective performance while rendering user interface for both iOS and Android OS.

It is an open source framework, which could be compatible with other platforms like Windows, Mac, or tvOS and has many new features that will develop in the near future.

React Native is a great choice for developers with experience in JavaScript as there is no need to learn Java for Android or Swift for iOS.

Other benefits of using React Native Framework include relatively simple, fast development process, because of the ability to reuse components and ease of maintenance to build Android and iOS apps.

React Native framework has gained popularity in recent years. It helps meet the needs of business owners for building their apps and platforms faster in a single process.

Hence, giants like Facebook, Instagram, Skype, Airbnb, Tesla, Walmart, Baidu Mobile, Bloomberg, Uber and many more have turned their eyes towards it.

Moreover, using React Native Framework fills the gap between focusing on a broad market and making profit.

As the number of iOS users is less compared to Android users yet you make more profit.

So there are many industries running into the dilemma of whether to focus on making more profits through building iOS apps or building user power through Android apps only.

React Native applications are compiled into native written code, enabling them not only to run on both operating systems but also to work the same way on both systems without any delay whatsoever.

Besides, it is a time saving process thus many industries and even individuals today prefer to use React Native with NodeJS to create amazing mobile applications. It gets better with time

Some of the concerns of React Native

Although React Native has been a breakthrough in mobile app development, it has some drawbacks.

The original framework for interaction is not present in any issue yet but it has some gaps that have yet to be addressed.

Some of the modules dedicated in this framework are not yet available, which may lead you to spend your time building and creating your own modules.

It still has a technological advantage

Although the pre-packaged items in React Native bring in a lot of technical progress, you will still need a professional developer to monitor for some technical errors and bugs.

Recently, Airbnb and Udacity shared their experience of using React Native and gave a judgment that this platform has a lot of benefits but still cannot be used successfully to build any kind of massive mobile application.

React Native framework is growing very fast and new updates are released every week. Every new update contains a lot of changes, so developers need to update their apps regularly.

Continuing to work for more than a few months without updating an app may cause a bad result.

There are some instances where React Native ingredients work worse than the original ones.

For example, with long lists.

Users see these types of lists everywhere:

Tweets on Twitter

Photos on Instagram

The posts on Facebook are all app lists.

When these lists get really huge and complex, it's even more difficult to implement with React Native.

React Native has FlatList library to work with long lists, but it can't be compared with flexibility and maturity of native platforms like UICollectionView (on iOS) and RecyclerView (on Android).

So using the original platforms in such cases is considered more productive.

React Native is not a good choice for developing an app that requires many interactions, animations, screen transitions, or complex gestures.

However, there is a React Native gesture-responsive system that manages the life cycle of all gestures in the app, when it comes to screens with complex gestures, developers may face some difficulties since the touch subsystems of Android and iOS are very different from using a UI. .

What is JAMstack?

info@rokkey.com — Tue, 29 Sep 2020 00:00:00 GMT

What is JAMstack? How does JAMstack technology work and how does it affect web development today?

This technology appeared to revolutionize the web world because of its great effectiveness on SEO, speed, security, and other details of the website.

Continue reading to learn more about JAMstack technology.

Introduction to JAMstack

During the past 20 years, most of the web applications relied on an architecture called (LAMP stack) for programming and launching websites. Most of those websites have been built using WordPress and many other eCommerce platforms.

But there has been a change in the world of web technology. A website owner no longer just wants a nice looking website.

The performance and speed of website browsing have become an essential need for everyone because it affects the SEO ranking of search results, and also reduces the bounce rate. Therefore, the need for a new architecture and technology known by the name of JAMstack appeared.

JAMstack technology is useful for building fast and secure applications that connect directly over the CDN, eliminating the need to manage or run traditional web servers and databases.

What does JAMstack stand for?

JAMStack is a new framework for building websites and web applications which is short for JavaScript, APIs, and Markup.

(JavaScript) a frontend technology that executes dynamic programming while communicating with APIs.
(APIs) backend technology that uses third party operations and accessed over HTTPS with JavaScript.
(Markup) prebuild HTML files. These can be generated using Webpack ( files bundler), such as Markdown, using a Static Site Generator.

What's the JAMstack framework?

JAMstack framework is a method to build fast and secure websites in the form of pre-rendered files and hosts these files on servers without the need to manage them in an easy way.

When we talk about this "stack", we are no longer talking about backend programming techniques, operating systems, specific web servers or databases that need a special team to fine-tune them.

JAMStack is not related to specific technologies.
It is a new method that integrates the backend programming techniques into one system to create websites and applications in a manner that provides better performance, higher security, lower cost, easier scalability, and better development experience.

What does pre-rendering mean?

It is a process of effectively pre-loading all the elements on the page and configuring them for web spiders to see them.
It is done by a so-called (Webpack) which compiles and compresses JavaScript files.

What are the benefits of JAMstack?

1- Speed
Nothing beats pre-generated Static HTML files served over a CDN.
This dramatically reduces page load and server response time. As a result, it gives an incredible speed in browsing.

2- Better security
Due to the abstraction and separation of server-side software from web pages (Static HTML), private software is isolated thus preventing attacks.

3- Better development experience
Front-end developers can focus on the front end, without being tied to a hybrid architecture and confusing the outdated, complex backend software technologies.
This usually means faster and more focused development.

4**- Reducing annual hosting costs
**JAMStack software consumes fewer server resources than other types of other applications, and therefore costs are lower**,** and hosting prices are almost free for simple sites, however, costs increase with the increase in the workload, this is what scaling is.

How popular is JAMstack today?

We notice that there has been an increase in the number of people interested in JAMstack technology during the past three years.
Web experts say it is the new future of the web as we will continue to see an increase in interest in this technology over time.

How does JAMstack work?

In the example noted in the picture, the development team works separately from the operations team. Netlify connects the two parties through what's called (CICD) operations.
Whereas the development team can use proprietary technologies such as JavaScript React, Go, or VueJs, and all the programming processes are linked with Github.

While the Operations team does its work via the Contentful content system.
The web hosting and publishing process takes place in the form of pre-rendered files via (Netlify) static site hosting provider.

In fact, JAMstack was initially brought to life by Netlify's Co-founder, Mathias Biilmann. Netlify provides next-generation web hosting and automation.

What are some tools I can use to create a JAMstack website or app?

JAMstack relies on a set of interrelated tools. Dealing with these tools seems a little intimidating at first, but this is because they are new and require consistent learning and patience. It can be divided into three main parts:

1- Static site generators

It is considered as a program that takes data, content, templates, and codes, processes them and outputs static files.

As the developer writes the code dynamically, the static site generators convert it into static HTML files quickly.
It is basically a collection of tools for building static websites based on a special set of inputs.
This means there is no direct connection with the databases, and no communication with the server.

This link should be shared, which compares and displays the list of static website generators for JamStack technology examples.

NextJs: It is one of the most popular generators (SSG) based on the / React / Node.js / JavaScript framework used to build dynamic or static interactive web applications.

Gatsby: is a React / Node.js / JavaScript-based open source framework for creating websites and apps (SSG).

Hugo is a Go language framework used to build dynamic or static interactive web applications.

Nuxt: A framework based on Vue.js / Node.js / JavaScript used to build dynamic or static interactive web applications.

2- Headless CMSs

Headless CMS is a content management system that provides a dashboard for creating and editing content, but it doesn't provide a front-end to create a website.
Content can be accessed through (APIs). Therefore, it is a back-end only solution.

Imagine WordPress, which has an admin dashboard, but no web themes or template.
It only allows the ability to create and store special server-side data types.
Everything related to the design and appearance of the site is called a "head". So it would be a headless CMS.

Some examples are, Contentful, Sanity, Cockpit, and Strapi.

3- Static web hosting

I like to think of this as the easy part depending on your setup.
Tools like Netlify and Vercel make it easy to install by linking it to the Github repo and building on push, but of course, you have options like AWS if you want more control. Here are some examples.

AWS
Azure
GCP
Github Pages
Netlify
Surge
vercel

Make your app dynamic

Developers who build their sites using (JAMstack) dynamically take a microservices approach to build backend server-side tasks and this process is done by linking to APIs.

The process of linking with APIs is easy as it is possible to link with multiple third parties to complete the programming work.
Examples and tools;

headlesscms.org - An endless list of headless CMSs.
Contentful content management and storage.
Algolia searches management.
Cloudinary - Media and Photo Management.
Google Analytics - Analytics website traffic,
Auth0 - authentication and user registration.
Snipcart - an online basket.
Stripe / Paypal - payment gateways.

Useful links and references

Author: Jam, JAMStack, https://jamstack.org/, Retrieved 9/10/2020
Author: Jam, JAMStack, https://jamstack.wtf/, Retrieved 9/10/2020
Author: Jam, WTF is Jamstack, https://cobwwweb.com/wtf-is-jamstack, Retrieved 9/10/2020
Author: Blog, The Netlify Blog, https://www.netlify.com/blog/, Retrieved 10/9/2020
Author: Gatsby, The Gatsby Blog, https://www.gatsbyjs.com/blog/, Retrieved 9/10/2020
Author: Staticgen, The Staticgen Blog, https://www.staticgen.com/, Retrieved 9/10/2020

Build a JAMstack website with us

Rokkey’s Respond to COVID-19

info@rokkey.com — Tue, 29 Sep 2020 00:00:00 GMT

Before COVID-19 spread across the world, companies didn't have to think too hard about how to fulfill basic human needs. But the uncertainty around the pandemic is a first for us all, and significant aspects of our lives are now irreversibly altered. Any organization has to reconsider how it can handle the suddenly prioritized basic needs of consumers. That’s why here at Rokkey, we make sure that our work ensures safety, show empathy and build trust.