COS3731 EMERGING
TECHNOLOGIES
PROF.
[Link] RODRÍGUEZ
ADOLFO PUENTE
DIAZ SARDINAS
COMPUTER
COMPUTERSCIENCE
SCIENCE DEPARTMENT
DEPARTMENT
UNIVERSITY
UNIVERSITYOFOF NAMIBIA
NAMIBIA
ADIAZ@[Link]
RPUENTE@[Link]
Lecture
Topics
Emerging mobile and web Technologies:
• What is a mobile device?
• Benefits of Mobile Technology.
• Modern Web Development.
• New Web Standards.
• Language Enhancements.
• Beyond Web Technologies.
What is a mobile device?
Any portable technology running an operating
system optimized or designed for mobile
computing.
Wikipedia: A mobile device (also known as a handheld
device, handheld computer or simply handheld) is a
small, hand-held computing device, typically having a
display screen with touch input and/or a miniature
keyboard and less than 2 pounds.
What are the different types of devices?
Mobile Tablets Smartphones
Benefits of Mobile Technology
• Portability
• Accessibility
• Ease of use
• Apps
• Built in Features: Camera,
Email, etc
• Personalization
• Convenience!
4G VS WIFI
4G WIFI
• Cellular Internet Connection • Wireless connection
• Range: Can be accessed nearly • Range: Approx. 200 feet of an access
anywhere point
• Use: Best for watching
• Use: Best for surfing the
videos, uploading, and downloading
web, checking email and • Limits: No plan required, data amount
reading usually is not limited
• Limits: Requires data plan
iOS Apps
Apple iOS
Purchase Apps for Apple Devices in iTunes
Must have an Apple ID
Can sync apps to other devices using iCloud
Android Apps
Android Devices Android Marketplace
Purchase Apps for Android Devices from the Android
Marketplace
Must have an Gmail Account
Purchase apps, music, books, and movies
What is an optimized mobile site?
Community College Umass Boston Westfield State
What is the Cloud?
Mobile devices should not be
seen as replacement PC/laptop
alternatives
Modern Web Development
Modern Web Development
Fluid User Experience with no page reloads
Single Page Application(SPA) Architecture
SOA, API and REST based development
Multiple clients, consuming the services
Server side vs Client side views
Client playing vital role by taking more responsibility
High performance apps with low bandwidth utilization
Server Side implementations are becoming a thin layer
New Web Standards
HTML
5
Latest and most enhanced version of HTML
Published in 2014 by W3C, supported by all modern browsers
A candidate for cross-platform mobile applications
Designed with low power devices in mind
Natively handle multimedia and graphical content
New semantic elements
• <article>
• <aside>
• <section> ... and many more
New API
• Canvas
• Offline
• Web Storage
• Geolocation
• Web Socket … and many more
CSS
3
The latest standard for CSS
Completely backward-compatible with earlier versions
Divided into separate modules
• Selectors
• Box Model
• Backgrounds and Borders
• Text Effect
• 2D/3D Transformations
• Animations
• Multiple Column Layout …
Language Enhancements
TypeScrip
t
Open source programming language developed and maintained by
Microsoft
Typed superset of JavaScript and Compiles to plain JavaScript
Provides optional static typing, classes and interface
Enables IDE to provide richer environment for spotting common
errors as you type the code
TypeScript 2.0 released on 22nd Sept 16 with several new
features
SASS (Syntactically Awesome Style
Sheets)
An Extension to CSS
Allows you to use things like variables, nested rules,
mixins, inline imports, inheritance and more
Helps to keep things organized
Allows you to create style sheets faster
JavaScript Frameworks & Libraries
Angular
2
The next version of Google’s MV* framework
Released on 14th Sept 2016 and Latest version is 2.4.1
Huge performance improvement
Designed with keeping mobile oriented architecture in mind
Developed using TypeScript
Component based programming
Simple and Expressive
Seamless upgrade from Angular
1
Legacy browser support
Great support for Animations
ReactJ
S
A JavaScript library for building user interfaces
Developed and maintained by Facebook
Key Features
• JSX – JavaScript Syntax Extension
• Components – React is all about components
• Unidirectional Data Flow and Flux
Advantages
• Uses Virtual DOM
• Can be used on client side and server side
• Components and Data Patterns improve readability which
helps to maintain larger apps
• Can be used with other frameworks
Web design trends and CSS Framework
Web design Trends
The end of traditional web design
Conversational UI
Next generation of responsive design
Minimalistic web design
Fewer stock photos, more authenticity
Long scrolling websites
Typography goes big
Bootstrap 4
Bootstrap world’s most popular framework for building
responsive, mobile-first sites and applications
Developed and maintained by Twitter
Bootstrap 4 is in Alpha (5)
Not recommended for production use, but highly recommended
for learning
New Features
• Bootstrap’s source is now Sass
• Improved grid system based on “rems”
• An Opt-in Flex Box Grid
• Cards
• Sass variables for customizing
• Dropped IE 8 support
JavaScript at Back End
NodeJ
S
Released in 2009 by Ryan Dahi
Written in C/C++
Built on Google Chrome’s V8 JavaScript engine
Extremely lightweight and efficient
What JavaScript has done for the web browser,
[Link] is doing for backend server
Does module loading and Asynchronous IO
Single threaded, One node process per CPU
Easily scalable (just create a cluster)
Great community and well maintained
Hybrid Mobile App Frameworks
Ionic
2
complete open-source SDK for hybrid mobile
app development
Enables the creation of cross platform mobile applications
with HTML, CSS and JavaScript(Angular 2)
leverage the skills you already have from developing web
applications
Take advantage of progressive web apps
Target all major mobile platform
Native functionality is easy to
implement
Meteor
An open-source JavaScript web framework written using
NodeJS
An Isomorphic development ecosystem
Allows rapid prototyping and produces cross-platform
(Android, IOS, Web) code
It is a cohesive development platform
Reactivity – Real time syncing of data is built into meteor at the
core
It has lots of other cool things like a templating system called
Blaze, A database on client called Minimongo and more
Developer Productivity Tools
Webpack
Webpack is a module bundler
It splits the dependency tree into chunks loaded on demand
It Keeps initial loading time low
Provide ability to integrate third party libraries as module
Provide ability to customize nearly every part of the module bundler
Best suited for big project
Angular 2 command line interface (CLI) tool uses webpack
Task
Runners
Grunt
• Linting our JS files
• Minifying JS files
• Compiling Less
• Watching for file change etc.
Gulp
• Spinning up a web server
• Bundling and minifying libraries and stylesheets
• Refreshing your browser when you save a file
• Quickly running unit tests
• Running code analysis
• Less/Sass to CSS compilation
• Copying modified files to an output directory etc.
Beyond Web Technologies
Io
T
Refers to ever growing network of physical objects
Extends the internet connectivity beyond traditional devices
Enables the exchange of data that was never possible before
IoT is going to trigger a massive influx of big data.
As more and more devices are being connected and accessible
to the network, we’ll find web developers coming up with
upgraded solutions to help users control and communicate
with their everyday gadgets and equipment
Big Data
Analytics
A process of examining large data sets to uncover hidden
patterns, unknown correlations, market trends, customer
preferences and other useful business information.
Apache Spark
• A fast and general engine for fast data processing
• Run programs up to 100x faster than Hadoop map reduce
in memory
• Combine SQL, streaming, and complex analytics
• Spark runs on Hadoop, MESOS, standalone, or in the
cloud
Scala – Scalable Language
• A JVM language that smoothly integrates the features of
object-oriented and functional programming
• Java libs may be used directly in Scala code and vice
versa
• Scala’s design decisions were inspired by criticism of Java’s
Some Interesting Facts
JavaScript is Every Where…
JavaScript is the most commonly used programming language on earth.
Even Back-End developers are more likely to use it than any other language
Source: [Link]
Trending Tech on Stack Overflow
Newer web-development technologies like React, [Link], and AngularJS
are growing in use
Source: [Link]
End.