Practical Project

Covering key-concepts and constraints

The World of UI/UX

"Well, design is a messed up premise because it was made when there was only wood, metal, glass, and our hands. Whereas the computational world is using alien materials, and in a world of alien materials, the nature of products and design should change. [...] This book is not about how to program. It’s about understanding the nature of what computation is. It’s about understanding that code manifests as an outcome in a universe where there’s a high ease to having unintended consequences."

Adobe XD Ideas

How to speak "computer" while still speaking "human"

Agile

"In software development, agile (sometimes written Agile) practices approach discovering requirements and developing solutions through the collaborative effort of self-organizing and cross-functional teams and their customer(s)/end user(s). It advocates adaptive planning, evolutionary development, early delivery, and continual improvement, and it encourages flexible responses to change."

Wikipedia

Agile Software Development

MVP

"A minimum viable product has just enough core features to effectively deploy the product, and no more. Developers typically deploy the product to a subset of possible customers - such as early adopters thought to be more forgiving, more likely to give feedback, and able to grasp a product vision from an early prototype or marketing information. This strategy targets avoiding building products that customers do not want and seeks to maximize information about the customer with the least money spent."

Wikipedia

Minimum Viable Product

Waterfall

Agile

Hybrid App

"The concept of the hybrid app is a mix of native and web-based apps. Apps developed using Apache Cordova, Xamarin, React Native, Sencha Touch and other similar technology fall into this category. These are made to support web and native technologies across multiple platforms. Moreover, these apps are easier and faster to develop. It involves use of single code base which works in multiple mobile operating systems. Despite such advantages, hybrid apps exhibit lower performance."

Wikipedia

Mobile App

Apache Cordova

"Apache Cordova (formerly PhoneGap) is a mobile application development framework created by Nitobi. Adobe Systems purchased Nitobi in 2011, rebranded it as PhoneGap, and later released an open-source version of the software called Apache Cordova. Apache Cordova enables software programmers to build hybrid web applications for mobile devices using CSS3, HTML5, and JavaScript, instead of relying on platform-specific APIs like those in Android, iOS, or Windows Phone."

Wikipedia

Apache Cordova

MVC

"Some web MVC frameworks take a thin client approach that places almost the entire model, view and controller logic on the server. This is reflected in frameworks such as Django, Rails and ASP.NET MVC. In this approach, the client sends either hyperlink requests or form submissions to the controller and then receives a complete and updated web page (or other document) from the view; the model exists entirely on the server."

Wikipedia

Model–view–controller

MVVM

"Model–view–viewmodel (MVVM) is a software architectural pattern that facilitates the separation of the development of the graphical user interface (the view) – be it via a markup language or GUI code – from the development of the business logic or back-end logic (the model) so that the view is not dependent on any specific model platform."

Wikipedia

Model–view–viewmodel

VIEW

CONTROLLER

MODEL

VIEW

MODEL

VIEWMODEL

VIEW

VIEW

VIEW

VIEW

VIEW

VIEW

VIEWMODEL

VIEW

VIEWMODEL

Other Architectures

• HMVC: Hierarchical Model-View-Controller
• MVP: Model View Presenter
• MVA: Model View Adapter
• PAC: Presentation Abstraction Control
• RMR: Resource-Method-Representation
• ADR: Action-Domain-Responder
• Flux: Action-Dispatcher-Resolver

Vue.js

"Vue.js (commonly referred to as Vue; pronounced /vjuː/, like "view") is an open-source model–view–viewmodel JavaScript framework for building user interfaces and single-page applications. [...] Vue features a reactivity system that uses plain JavaScript objects and optimized re-rendering. Each component keeps track of its reactive dependencies during its render, so the system knows precisely when to re-render, and which components to re-render."

Wikipedia

Vue.js

Vuetify

"Vuetify is the #1 component library for Vue.js and has been in active development since 2016. The goal of the project is to provide users with everything that is needed to build rich and engaging web applications using the Material Design specification. It accomplishes that with a consistent update cycle, Long-term Support (LTS) for previous versions, responsive community engagement, a vast ecosystem of resources and a dedication to quality components."

Vuetify

Why Vuetify?

Material Design

"Material Design (codenamed Quantum Paper) is a design language that Google developed in 2014. Expanding on the "card" motifs that debuted in Google Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows."

Wikipedia

Material Design