Scribd
Upload
32 views

Chapter 5c - Frontend Vs Backend

The document discusses the key components of mobile app development including the frontend, backend, and APIs. The frontend is what users interact with directly and involves elements like buttons and text. The backend runs behind the scenes to organize and store data. APIs allow the frontend and backend to communicate.

Uploaded by

manar ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
32 views

Chapter 5c - Frontend Vs Backend

The document discusses the key components of mobile app development including the frontend, backend, and APIs. The frontend is what users interact with directly and involves elements like buttons and text. The backend runs behind the scenes to organize and store data. APIs allow the frontend and backend to communicate.

Uploaded by

manar ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

Chapter 5c: Frontend, Backend and API

SKR4307
Semester I 2022/23
1. The app development
• Planning – an integral part of the mobile app
development process.
• Before actual development/programming efforts
start:
 Define the technical architecture,
 Pick a technology stack, and
 Define the development milestones.
• Mobile app project – made up of 3 integral parts:
 Backend/server technology,
 API(s) and
 Mobile app front-end.
… cont.

• Frontend and Backend – 2


buzzwords that often pop up
while talking about app
development.
• Divide the job of app developer
into 2:
 Front-end developer requires a
different set of skills than
 Back-end developer.
3. Frontend – a client side
• Native mobile app an end-user will use – the installed from
Play Store or App Store.
• Permit to connect app through buttons, text fields, flips, etc.
• Developer – accountable for translating app’s design to a code
which required to display properly on the browser.
• The part the user interacts with directly.
3.1 Frontend developer
• Provide the structure, appearance,
behaviour, and content of everything that
appears on browser displays when websites,
online applications, or mobile apps are
opened.
• 2 key focus points – responsiveness and
performance.
 Responsive – it works properly on devices of
all sizes.
 Application’s performance – be always stable,
no matter the device used to access the
application.
3.2 Frontend languages

Different languages that can be


Main languages – are HTML,
used for frontend – the
CSS, and JavaScript.
framework:
• Dart in Flutter, Java and
• Work hand in hand to make XML in Android Studio,
the website or application JavaScript in React, Python
function well while looking in Django, and so on.
good at the same time. • HTML5 in Ionic,
• C# in Xamarin …
3.3 Frontend frameworks

• Libraries in app development – SDK


• Provide developers with the right tools to
help in the development process.
• Most popular libraries in front-end
development are ReactJS, AngularJS,
Android Studio, Flutter and jQuery.
4. Backend – a server-side
• Organizes and stores data – ensuring that
everything on the client side functions
properly.
• Doesn't interact with users directly – it plays
an indispensable role behind the scenes by
adding key functionality to an app.
 Without a clean and proper backend – frontend
won’t work properly.
 Even though user don’t directly interact with the
backend – users are indirectly in contact with all
the processes that happen on the backend.
4.1 Backend activities
• Such as writing APIs, creating libraries, and
working with system components without UI.
 Core functionality of apps – managed by the backend.
• E.g., purchase something from an online store:
 Backend manages the actual money transactions
when going through the checkout process.
 While the frontend makes sure the checkout – button
is positioned properly on the page and sends to the
next page, the backend interacts with services outside
of own app or website, such as bank app or PayPal.
 Don’t see the entire process – all happens behind the
scenes, in the backend.
4.2 Backend
languages
• Server-side of an app – has own
programming languages.
• Languages are made in such a
way that they can interact easily
with the frontend, creating an
optimally functioning piece of
software.
 E.g., NodeJS, Java Script, C++,
Swift, Java, PhP … etc.
4.3 Functionalities that require a backend

• The app needs a back office, admin panel, or web page where will be
able to manage the content of the app
• The app shows data which updates frequently (every day, every week)
• User devices should synchronize data between each other
• Need to collect orders and process payments
• Users of the app should communicate with each other
• To collect statistical data about the users
• Want the users to get notifications about promotions, updates or news
• Apps in the phone and that work with
no backend.
 Calculator – allows users to do basic
mathematical operations.
 Measure – allows users to measure
4.4 Apps – anything want just with the phone.
 Camera – built-in/installed by default on
functional with each smartphone.
no backend  Voice recorder – app which can use as a
Dictaphone.
 Tetris – a game that the backend doesn’t
need to be involved.
 Single-player games don’t need
backends to be playable – they are
fully functional without them.
4.5 Backend Types – Apps

a. Service as a Service (SaaS) or 3rd party


services
 Offer backend solutions that are ready to be used
by frontend apps.
 Need to register, subscribe under a monthly fee
and – got a ready and working backend in a few
clicks/seconds.
 E.g., OpenWeatherMap, Contentful, Shopify
… cont.

b. Mobile Backend as a Service (MBaaS)


 Services like Firebase or Parse.
 Some functionalities of the backend are common
between for many apps, such as the way data is
stored, authorization, authentication, push
notifications, and a lot of others.
 Gives the possibility to glue the backend from
ready components that offer required
functionalities.
 Back4App, Parse, Firebase, AWS Amplify,
Azure Mobile Apps
… cont.
c. Custom backend development
 Most flexible and powerful option.
 Everything which cannot be achieved by SaaS or MBaaS can be achieved by
a custom backend.
 Obvious drawback is the price of setup and implementation.
 Requires having a dedicated backend programmer or a whole team.
 Custom backend can be a simple application or a complex distributed system,
all depending on the app requirements.
 Python, PhP, Java, Ruby on the Rails, C#, Node.Js

 Node.js Tutorial: How JavaScript on the backend can make your life easier.
4.6 Frontend versus Backend – TripAdvisor app
• The app shows an intuitive list of restaurants.
• The restaurant’s photos, addresses, and
descriptions – provided by a backend application.
• When open the app and search for restaurants – it
communicates with its server, passes your current
location there and, in exchange, it gets the list of
nearby restaurants and the respective data.
• The application which runs on this server:
 probably the whole network of cooperating servers –
the backend of TripAdvisor’s app.
5. Tech stack – backend mobile app
development
• Includes choices of:
i. The programming language
ii. Architecture (e.g., a monolith, modular
monolith, microservices or serverless),
iii. Infrastructure – the platform where the
backend is run from, such as AWS,
Heroku or one of many other platforms
iv. Database – can be SQL, NoSQL DB or
another kind of DB, it is also possible to
use a mix of different databases types,
v. Type of API – such as JSON API, REST
API, GraphQL, XML, or any others.
• method of communication – between the
app and a back-end server/database.
• E.g., JSON (interchange data format) which
backends frequently use to communicate
6. API – with frontend.
Application
Programmin
g Interface
6.1 Facebook API – popular & most used mobile
API
• Allows apps to access user profile information and
utilize the social connections that have made FB.
• Gives mobile apps the ability to post activities,
accomplishments, etc., to the news feed and profile
pages of FB.
• API access – predicated on user privacy and security
settings:
 If users allow access, the Facebook API can share
directly from the app to Facebook.
 FB app API can also be used to sign in, create
profiles, and authenticate users on other websites and
apps that are using the API.
6.2 Google Maps API
• Not free to use – charges developers to use their valuable mapping and
location-tracking API.
• After paying for access – there are restrictions based on the number of
queries made in a 24 hour period.
• Help reduce the costs of using the Google Maps API – mapping services into
four different APIs:
 Directions API
 Static Maps API
 Distance Matrix API
 Street View Image API
• Gives app developers the ability to pick and choose which mapping and
tracking services they want instead of paying more for the complete Google
Maps service.
6.3 RESTful APIs

• RESTful or REST – an architectural structure for an API.


• REST (representational state transfer):
 Uses HTTP requests to access and use data.
 The data accessed by a RESTful API can be: CRUD
• RESTful API – more commonly used in the development of APIs
for mobile apps because it requires less bandwidth than the
alternative, which means it is more Internet efficient.
• REST also has faster processing times.
6.4 SOAP - Simple Object Access Protocol

• Rely exclusively on XML for messaging, which is bulkier, slower, and requires
more bandwidth to process.
 Doesn’t mean that there is no value in SOAP APIs.
• Many advantages over REST – when comes to large, distributed enterprise
environments.
 Has a higher learning curve than REST and requires the use of more expensive
tools.
 RESTful APIs – the most popular for mobile apps, but that doesn’t mean that
they are the only mobile app APIs.

You might also like