Explore
For Enterprise
Join for Free
Log In

Гуманитарные науки и искусства
Бизнес
Компьютерные науки
Наука о данных
Информационные технологии
здоровье
Математика и логика
Личное развитие
Естественные и технические науки
Социальные науки
Изучение языков
Степени
Сертификаты

Полный обзор Coursera

Обзор
Поиск
Для организаций
Войти
Присоединиться бесплатно

Hybrid Mobile App Development

Loading...

Multiplatform Mobile App Development with React Native

Гонконгский университет науки и технологий

4.7 (оценок: 160) | Зарегистрировано учащихся: 7.7K

Курс 3 из 4 — Full-Stack Web Development with React Специализация

This course focuses on developing truly cross-platform, native iOS and Android apps using React Native (Ver 0.55) and the Expo SDK (Ver. 27.0.0). React Native uses modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with React Native UI and layout support and access the native mobile platform's capabilities from Javascript using the Expo SDK. You should have already completed the Bootstrap 4 and the React courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your React and Javascript skills, (c) Use various features of React Native and the Expo SDK to build truly cross-platform mobile applications, and (d) Use Redux to design the architecture for a React-Redux application

Просмотреть программу курса

Рецензии

4.7 (оценок: 160)

5 stars
129 ratings
4 stars
22 ratings
3 stars
7 ratings
2 stars
1 ratings
1 star
1 ratings

FL

Jun 07, 2019

Very well structured and the exercises help a lot to understand more how react works. A little out of date but still good.

CJ

Jun 10, 2019

Nice course for learning Multiplatform Mobile App Developement. Very well instructed...

Из урока

Multiplatform Mobile App Development with React Native: An Introduction

This module introduces you to hybrid mobile application development. You will learn about React Native and explore some of the features of React Native to implement a mobile app based on the React application that was implemented in the previous course on React.

Hybrid Mobile App Development17:50

Introduction to React Native10:59

Exercise (Video): Getting Started with React Native18:43

React Native App Overview12:06

Преподаватели

Jogesh K. Muppala
Associate Professor

Текст видео

[MUSIC]

Let us now briefly talk about hybrid mobile app development.

What exactly is hybrid mobile app development and

how does react native fit into the overall picture in hybrid mobile development.

As we already know there are two dominant mobile app platforms, Android and iOS.

Now these platforms, if you wish to double up mobile applications you

could go the native way using the native development environments and

the native tools to double up applications for

these two platforms and their corresponding languages, Java or

Code Line in case of Android and Objective-C or Swift in case of iOS.

Now, this gives you the full ability to access all the features of the native

platform in order to make use of them within your mobile application,

but of course this means that if you need to develop a mobile app targeting both

the platforms, then you need to have two separate code bases targeting each of

the two platforms and then do the development in two different languages for

each of the two platforms.

Now, the mobile app development community has approached this

problem trying to resolve the issue of having to maintain separate core bases.

Instead, the question is, can we do mobile app development using

a single cord base but still be able to target both the platforms?

Now one easy approach to take in this case is to use

the mobile website as a way of reaching into the mobile platform.

So this is where we allow the mobile device users to

use their built in browser to be able to access a mobile site.

Thus the users are able to obtain information directly from the mobile

website.

This of course means that their application itself is fully hosted in

the mobile browser and with a a slower side being supported by us and

this is obviously the slowest way of reaching into the mobile platform.

And also, this approach has very limited capability of reaching into that

native device features of either of the two mobile platforms,

of course this is improving day by day.

Nowadays using the mobile browser approach you can

get access to a lot more of the native capabilities.

Including things like location and even local storage on that mobile device.

But still there are limitations on what you can get access to

within that mobile devices themselves.

Now the other approach that people have adopted is to use what is called as

the hybrid mobile application development with the WebView

being used for this purpose.

Now in this case, with the WebView both iAndroid and

iOS have a WebView which is

a widget that is part of both the platforms

that you can use when you design the user interface for your mobile application.

So part of the screen can be occupied by the WebView widget and

once that WebView widget is included in your screen layout

then you can easily target the content within the WebView widget

using the standard web technologies like HTML, CSS, and JavaScript.

And also even going to the extent of using frameworks

like Bootstrap to design the content with responsive approach.

But of course, this approach is too slow compared to the native approach.

And it doesn't get access to all the capabilities of the devices.

Now an example of using this approach would be the ionic

framework which also uses the Cordova framework underneath for

getting access to the Native device capabilities.

Now interestingly, a lot of the native capabilities can easily be

leveraged through the Cordova framework and

be able to access that within the WebView of your applications.

Now, so this is the other approach.

But again, there are limitations again to using this approach.

Now, looking at this, the mobile app development community

design yet another way of reaching into that mobile platform.

What it's called is a compiled, interpreted or a VM Hybrid based approach.

In this case, what we realize is that both Both Android and iOS have a built in

JavaScript engine which they leverage for supporting their browsers.

So if we can then leverage this JavaScript engine that is part of both Android and

also iOS.

In case of Android it is the V8 engine and in case of iOS it is the JavaScript code.

Now, if we can write our applications using JavaScript but

then be able to run this JavaScript application on top of the virtual machine,

of the JavaScript virtual machine that is included in both the platforms,

then we will be able to get access into the native device capabilities.

There have been many attempts at using this approach for

getting access to that mobile device native capabilities.

React native and NativeScript are two such examples of

use of this compiled or interpreted or the VM Hybrid approach.

Let's talk briefly about these two approaches,

the Hybrid approach with the WebView and the Compiled Interpreted or

a VM Hybrid approach in the little more detail in the next slide.

So again, talking about the Hybrid App development approaches.

As I mentioned in the previous slide,

you have the WebView approach where you can still use the HTML, CSS and

JavaScript to design your user interface and then be able to run

this code in the WebView that is included in the layout of your application.

And as I mentioned, ionic plus Cordova,

our PhoneGap is an example of this kind of an approach.

Now the advantage of using this is that you get a mobile

app which feels native, or at least neo-native because you can

install the mobile app on to the mobile device and so it'll fill

part of the mobile devices various applications that are already installed.

And so the user invokes app just like they invoke in native mobile application.

This is contrast to using the mobile web approach where

you expect the user to first fire up a browser and then type in the address

of the mobile site and then go and actively access the mobile site.

So the WebView approach is already getting closer to a native

way of providing access to the application.

Now, again,

as I mentioned in the previous slide, the WebView approach has limitations.

Now this is where the compiled,interpreted and

hybrid approach has been adopted and in this case we maintain the major

code off of an application code base in a single language.

Typically JavaScript, for example,

when you use react native or you use a native script.

The code is itself written in JavaScript.

Actually it's the business logic code is written in JavaScript.

Then you get access to the native

widgets on the tool platforms to layout the user interface.

Now, exactly how is this done in react native?

We will talk about that in the next lecture in this lesson.

So again, as I have already mentioned, React Native and NativeScript are two

approaches that use JavaScript as the language of choice for

development and then be able to access it in the native device capabilities.

There are other platforms like Appcelerator Titanium,

Xamarin, which uses C sharp as an approach for doing development,

Embarcadero FireMonkey and many more in the mobile development world.

So again, summarizing,

there are different types of frameworks that are aimed to build hybrid apps.

So again, whether you use the WebView approach or

the compiled approach that we talked about in the previous slide.

So Frameworks that use HTML5 content to target like Ionic + Cordova or

Ionic + Phonegap.

Frameworks like React Native and NativeScript which still allow you to do

your application development in JavaScript and

then be able to access the Native device capabilities by leveraging

the Native UI widgets while doing the user interface layout.

Similarly, you have frameworks like Unity,

which is used for doing 3D games environment.

Unity is based upon CSharp or JavaScript as their approach but

it is purely targeted at developing mobile games.

Kivy, which is a python based approach and similarily libgdx,

which uses Java and more game oriented and targeted at the android platform.

An then you have commercial frameworks like Xamarin or Emcarcadero.

Xamarin using CSharp as the language of development choice.

Talking about the advantages of the hybrid approach,

of course you already probably realized that some of the advantages of

the hybrid approach you have a single core base.

And you can leverage the existing skips if you are already a well

versed JavaScript developer, then doing applications in react native or

not a native script is fairly straight forward for

you because you can leverage your JavaScript skills for doing development.

In this course we will actually learn about how React Native leverages

JavaScript plus the React framework to

enable us to double up React Native applications.

Similarly, you have a single code base which enables you to

target multiple platforms, Android and IOS in this case.

And thirdly, you have reduced development time and

cost because you have a single code base and the fact that you are able to reuse

your existing development skills means that you don't need to train

originally in three different platforms to be able to target the web and

the two mobile platforms for your use.

Also, they provide you with an easy way of targeting various form

factors all the way from a web browser in a standard

computer using the web technologies, than you can target the tablets and

the mobile devices using responsive web design and so on.

And also you can get access to some of the native features on the mobile device.

And also with the ability of local storage

both using mobile web, as well as using the WebView approach.

As well as using the compiled approach that we have talked about.

You get access to the native storage capabilities on the mobile devices.

Typically you get access to something like a key value storage which enables you to

store data on your mobile device itself for providing offline capabilities.

And also, the fact that you are able to double up your mobile app and

then be able to release the mobile app on the specific app stores,

whether it is the Google Playstore or the iOS or the Apple store,

means that you get immediate access to the mobile users that

typically download applications from these stores and

install on their mobile devices.

So the visibility that you gain by doing a WebView app or

a compiled app using either React Native, or NativeScript,

or one of the other approaches, means that you are able to reach into

the stores and get access to the mobile device as opposed to

simply designing a mobile website where you expect the user to actively

fire the browser to reach out to your mobile website.

Of course, the Hybrid Approach comes with its own set of drawbacks.

Now of course, as I've been mentioning,

there are issues like performance issues that you will encounter.

But for most, typical use cases that you will see,

for mobile applications, this may not be a problem.

The performance issues manifest themselves a lot more in cases where

you are doing high performance games, or 3-d games for your mobile devices.

Now, that is where it may be better off to go native or at least use

a gaming engine like Unity for developing 3D games and so on.

The increased time and effort to be able to mimic the native UI feel,

look and feel, again this is mitigated significantly with platforms like ionic

plus cordova where ionic provides you with a major look and feel capability,

and automatically adapts to the native look and feel of the tool platforms.

Similarly, react native and native script,

since they are all leveraging the native devices, UI rejects,

that UI looks very much like a native application so

you would be to tell the difference between a react native application

as opposed to a fully native application.

One more downside as I have emphasized,

is that you may not be able to get access to all the native device features but

again this is becoming less and less of an issue because many of

the platforms are able to leverage most of the native device capabilities

including things like the sensors built into your mobile devices.

So which means that you would pretty soon hardly see any

difference in terms of this particular issue,

being able to get access to the native device capabilities.

Now, one minor issue that we need to keep in mind is that when you use

the hybrid approach there is that little bit of risk that the Apple

store may reject your application, although increasingly we

are finding less of a concern in this particular issue, because there are,

indeed, a lot of applications that are designed using React Native MEGAscript.

And Ionic that are already on both the Android, as well as the iOS stores.

So, this may be less of a concern as time goes by.

You will be surprised that many of the mobile applications that you use

are actually hybrid mobile applications without you even realizing that

they are indeed Hybrid mobile applications.

Take Facebook as an example, it is completely done using react native.

Now where do hybrid approaches shine?

In terms of their use cases?

Now typically, hybrid approaches are again, as I said, is not suitable for

all kinds of applications.

But many use cases for mobile applications.

Do not require true native capabilities, so

you need to evaluate the target users, and the platforms of choice,

and the app requirements, and be able to decide how you approach this platform.

And for many content driven applications like business and

productivity applications, enterprise applications, and even media applications.

Like for example Spotify.

Can you tell whether Spotify is a native app or a hybrid mobile app?

Think about that question.

So, these kind of apps definitely shine by using the hybrid approach.

With this quick introduction to hybrid mobile application development,

let's delve into React Native in the rest of this course.

[MUSIC]

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2019 Все права защищены.

Загрузить из App Store

Загрузить в Google Play

Coursera
О проекте
Руководство
Карьера
Каталог
Сертификаты
Сертификаты MasterTrack™
Степени
Для организаций
Для правительственных организаций

Сообщество
Learners
Partners
Developers
Beta Testers
Translators

На связи
Блог
Facebook
LinkedIn
Twitter
Instagram
YouTube
Технический блог

Еще
Условия
Конфиденциальность
Помощь
Доступность
Пресса
Контакты
Справочник
Филиалы