Front End for iOS Developers(Part 2)
Following up the previous article(Front End for iOS Developers(Part 1)), which covered the the loading and life cycle events for web apps and views, this article will focus view layout and positioning, memory management with javascript, and dependency injection.
View Layout
The view layout on the screen is managed by the HTML and CSS configuration.
HTML sets up the general structure of the screen but using CSS we can define the layout behavior for our views, meaning setting static or relative distance between them and also adjust them for screen size (and etc..).
personally iOS’s auto-layout makes more sense to me and seems easier but it looks like the web way of doing offers an easier way to adopt the layout for multiple display sizes and types and generally being more fluid.
Memory Management
Javascript uses Mark and Swipe Garbage Collection (GC) for automatic memory management, in contrast to Swift which uses ARC (automatic reference counting).
ARC — Works by counting the refs to an object, and if it is 0 it clears it out of the memory
Mark and Swipe — periodically checks the memory reference tree (starting from the root objects) and marks all the objects that are “alive” (aka part of the active tree) and then free’s any objects that are not referenced.
I personally favor ARC as it is way faster and gives more control to the developer, it can potentially can have a retain cycle but those are usually pretty easy to spot and fix (at least in Swift). GC on the other hand has less changes to have a memory leak and abstract a larger aspect of it, but it also consumes way more memory and the developer has no idea when it going to be released.
Dependency Injection
The following article explains very well the principles of DI (Dependency Injection) and why we should use it. he displays the use of manual injection via constructor method, but there are also frameworks and libraries that enable us to inject via a container.
compared to Swift the injection is relatively done the same, the only thing it is only available in Typescript as it requires type abstraction which seems to not be available in plain Javascript.
Testing
If we using DI for separating our code well testing should be super easy and there are a lot of frameworks available for writing tests for JavaScript code, seems that jest is one the popular frameworks available.
For testing i assume that testing Javascript should be easier as it has not device dependency like in mobile which should make it way easier and fast, but it probably introduces the issue of browser compatibility where each browser might render and mange the code slightly different which requires testing as well.
Passing Data
Passing data in Typescript seems to be in par with the current state of iOS, we can either user callbacks, or use external libraries for reactive programming and delegation if we really want to.
React + TypeScript
React — Is an open source javascript library for building UI components, it is declarative, and introduces the use of JSX which allows an easier way to modify the DOM and render the client side.
Typescript — Typescript is a super set of Javascript, it provides all the capabilities of Javascript and adds stricter type safety, and support object oriented programming. because the browser can only run Javascript, there is a “compilation” of Typescript into Javascript.
Package Management
Currently the main package management system out are yarn and npm . yarn uses the npm registry, but provides a more robust and simpler experience, so it seems like the go to as of today.
Concurrency
Web apps do not have real concurrency as they run on a single thread, but they can run in an async way by manipulating the order of execution on the call stack.
There is a great talk from JSConf about the event loop in Javascript and web apps. Basically when a function is being called it is being added to the stack trace, the function that are added to stack are synchronous (as in blocking), in order to not block the stack with long running function we can offload those functions to the callback queue in various ways.
The callback functions that are queued end up being executed on the stack either way but are timed so that there are no other tasks on the stack that way they won’t be blocking.
