Native VS Hybrid - Which is the best tech stack for your mobile app.
- game needs to be built with native, not hybrid
- react native, flutter and ionic are hybrid
- über eats is react native
- Hybrid apps or hybrid mobile apps are applications created with web technologies. This includes languages like HTML5, CSS and JavaScript. They are called hybrid because they possess elements of both native and web apps.
- convert the code into native (react native and flutter), but ionic is strictly web
- negative of hybrid is that they don’t interact with hardware very well
- location - will take a noticeable amount of time
- if you use camera a lot better to make native
- iOS has API for hardware, android doesn’t have one for camera
- use as little libraries as possible
- maintaining is hard
- it’ll give errors in 6 months time
what is oop
- style of programming, or a programming paradigm
- encapsulation
abstraction
inheritance
polymorphism
encapsulation
* grouping of related var and f
let employee = {
base_salary = 30
overtime = 10,
rate = 20
getWage: function(){
return this.base_salary + (this.overtime * this.rate)
}
}
employee.getWage()
* local storage is an object in browser that allows to save to it
* in procedural programming variables and functions are decoupled
* procedural code has functions with lots of parameters
* oop functions have no parameters, making it easier to maintain that function
* benefit: reduce complexity + increase reusabilityabstraction
- dvd player has complex board inside and a play button outside; implementation is hidden behind public interface
- in object hide functions and variables to make interface simpler
- benefits: reduce complexity + isolate the impact of change - if you change inside methods and properties it has no contact with outside
if we have every method public, every time we add a parameter we have to add an argument everywhere to it
if we have more parameters than the arguments, the parameters that have no corresponding arguments are set to undefined.
inheritance
- benefit: mechanism that allows to eliminate redundant code
* all buttons have shared code which we can put in one object and have the buttons that vary inherit them
polymorphism
- benefit: technique that allows to get rid of long if/else or switch statements
- you can just use one render method to render them all differently
Polymorphism means many forms. In terms of programming, it specifically refers how sub classes inherit all of the properties from a parent class but can also have their own specific properties. For example, let’s think about a teacher and the students inside a classroom. They have many characteristics in common, such as name, age, and so on. However, students may have their own characteristics that a teacher doesn’t, such as grade.
https://www.youtube.com/watch?v=YkhLw5tYR6c
The word polymorphism means having many forms. In simple words, we can define polymorphism as the ability of a message to be displayed in more than one form. Real life example of polymorphism: A person at the same time can have different characteristic. Like a man at the same time is a father, a husband, an employee
ecma and ecmascript
- ecma organization that defines standards for technologies
* ecmascript is a specification (standard), js is programming language that conforms to ecmascript specification
how to you define an object
what is object behavior
- object literal is a simple way to define an object, but you can also define them with a factory or a constructor
- when object has methods, we say it has behavior.
Object literal is not a good method to copy an object
factory and constructor functions
factory function, constructor function and class are all functions
Factory functions
A factory function returns a (presumably new) object. In JavaScript, any function can return an object. When it does so without the new keyword, it’s a factory function.
function person(firstName, lastName, age) {
const person = {};
person.firstName = firstName;
person.lastName = lastName;
person.age = age;
return person;
}
If you look at the above code inside the function, it creates a new object and attached passed arguments to that object as properties to that and return the new object. That is a simple factory function in JavaScript.
Constructor Functions
differ only from its use case and a convention. Other than that factory functions and constructor functions are similar. The convention of defining a constructor function is to use Pascal case to denote that this is a constructor function, the use case of this function is that creating similar types of objects with the new keyword, then later we can do instance checks using theinstanceof keyword in JavaScript. function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}- every object has a property called constructor, referring to function that created the object
? every object has a property of a constructor (which is a function) and property prototype (which is an object)
further deeper reading
https://medium.com/javascript-scene/javascript-factory-functions-vs-constructor-functions-vs-classes-2f22ceddf33e
primitives vs objects
- value types (primitives)
- number, string, boolean, symbol, undefined, null
- reference types (objects)
- array, object, function
- objects are copied by their reference: https://www.udemy.com/course/javascript-object-oriented-programming/learn/lecture/10019692#overview
properties in js
- in js we can add properties on the fly; because we don’t have classes we don’t have to have properties defined ahead of time
- makes js powerful and easy to work with
circle.location
if location is dynamic use brackets for variable
circle[propertyName]
also if you have special char or space
circle[center-location]
to delete a property
delete circle.location
- enumerating properties
for(let key in circle){
if(typeof circle[key]!== ‘function’)
console.log(key, circle[key]
}
if(‘radius’ in circle){
//to check for property
}define execution context
Execution context is a concept in the language spec that—in layman’s terms—roughly equates to the ‘environment’ a function executes in; that is, variable scope (and the scope chain, variables in closures from outer scopes), function arguments, and the value of the this object.
scope vs closure
@ 3:00 https://www.udemy.com/course/javascript-object-oriented-programming/learn/lecture/10019708#overview
scope is temporary, closure variables will stay in memory after parent function runs
how do you make private properties and methods?
- by making local variables and functions, we now have private properties and methods in an object
- getters and setters @ 2:00 https://www.udemy.com/course/javascript-object-oriented-programming/learn/lecture/10019718#overview
// We can hide the details by using private members. Replace “this” with “let”.
function Circle(radius) {
// Public member this.radius = radius;
// Private member
let defaultLocation = {};}
how to create an object in JS
// The simplest way to create an object is using an object literal
const circle = {
radius: 1,
draw: function() {}
}; // To create multiple objects with the same structure and behaviuor (methods), use a factory or a constructor.
// Factory function (doesn't use a new keword)
function createCircle(radius) {
return {
radius,
draw: function() {}
}
}
// Constructor function
function Circle(radius) {
this. radius = radius;
this. draw = function() {}
}
// Every object has a "constructor" property which returns the function that was used to construct or create that object.
const x = {};
x.constructor; // returns Object()
//class syntax
class Button {
constructor(value) {
this.value = value;
}click() {
alert(this.value);
}
}
let button = new Button(“hello”);
what do we mean when we say functions are objects in js
// In JavaScript, functions are objects. They have properties and methods.
Circle.name;
Circle.length;
Circle.constructor; // returns Function()
Circle.call({}, 1); // to call the Circle function
Circle.apply({}, [1]);
by value vs by reference
// Value types are copied by their value, reference types are copied by their reference. // Value types in JavaScript are: String, Number, Boolean, Symbol, undefined and null // Reference types are: Object, Function and Array
let user = { name: ‘John’ };
let admin = user;
admin.name = ‘Pete’; // changed by the “admin” reference
alert(user.name); // ‘Pete’, changes are seen from the “user” reference
how are js objects dynamic.
// JavaScript objects are dynamic. You can add/remove properties:
circle.location = {};circle[‘location’] = {};
delete circle.location;
// To enumerate the members in an object: // To see if an object has a given property
for (let key in circle) console.log(key, circle[key]);
Object.keys(circle);
if (‘location’ in circle)
// To define a getter/setter,
use Object.defineProperty():
Object.defineProperty(this, ‘defaultLocation’, {
get: function() { return defaultLocation; },
set: function(value) { defaultLocation = value; }
});
