What Kinds of Mobile Applications Enterprises Need in 2019

Different Types of Mobile Applications Development and Evolution in 2019

Photo by Yura Fresh on Unsplash

Since the opening of iOS App Store in 2008, the number of mobile applications (‘apps’) available on Android and iOS platforms has already showed an exponential growth beyond 2 million. Nowadays, city dwellers manage all kinds of matters through their mobile phones, from online banking, social media accounts, gaming, video-shooting to daily transaction. Some may even choose mobile phones over their wallets if they have to leave home. When it comes to connection, mobile apps become indispensable to clients and staff of enterprises of all sizes.

Your mobile device has quickly become the easiest portal into your digital self. — — Phil Nickinson, Editor of Android Central

Mobile apps development was a craze before and after 2012. All you needed to make your first bucket of gold is to develop a convenient and user friendly app at that time. But modern-day companies can select suitable types of mobile apps to be developed according to their own business needs, resources and time constraints by drawing reference from the flourishing apps market. To help you narrow down your choices and find the right one, we will briefly explain to you different types of mobile apps development.


Native App

(Source:http://uatblog.nubizsol.com/index.php/2018/12/24/hybrid-mobile-app-development-by-nubiz-specific-to-the-time-and-customer-needs/

Native app is written in the same set of native code language used in writing the mobile phone system. From the earliest iOS’s Objective C to Swift and Android’s Java to Kotlin, writing apps in the native language is regarded as the most direct way in apps development. In theory, native app makes the most efficient use of all  features in a mobile phone and provides the best user experience.

Native app has an edge over other types of applications in utilizing the features of a mobile phone, in the sense that native app could adapt the changeCost matters and time is tight, the market always automatically adjusts and seeks new paths in apps development. The hybrid apps were born.. Native app is the first to use and adopt new features, such as the popular Machine Learning and Augmented Reality (AR) in recent years.

On the contrary, developing native apps incurs a comparatively high cost. Considering that the market is a blend of products out on iOS, Android and Windows, the app you developed is generally expected to support users from multiple platforms at the same time. Otherwise, writing the apps in separate sets of native code languages for different platforms may properly double the cost and duration required for apps development.

Examples of native apps include: Camera+, iCalender


From Hybrid Apps to Cross-platform Apps

Cost matters and time is tight, the market always automatically adjusts and seeks new paths in apps development. The hybrid apps were born.

Imagine that hybrid app installs a web browser in your mobile phone, as web browser is in nature universal among various mobile phones, so you can open a simulation of mobile app in the form of website through this browser. That’s how the primary shareable coding of an app could be displayed in the form of website. For the remaining features of an application that could not be displayed on a website, the parts must be written in the native code language of respective platforms. If you have to launch an application for both Android and iOS platforms, choosing hybrid over native app saves around 25% cost and duration of development to create the same effect.

In 2105, apps written in Iconic based on AngularJS and Cordova had bloomed and swept the world. However, the core problem of hybrid apps is the deficiency in user interfaces performance. In view of the very limited capability of Android and iOS browsers at that time, the user experience of hybrid apps was much worse than those native apps offer. For the experienced mobile phone users, a glance is enough to tell whether an app is hybrid. Corporate images may be adversely affected when clients had a bad experience on their hybrid apps.

But you don’t have to give up user experience for the sake of paying less with cross-platform app as a successor of hybrid created by mobile apps development companies. The biggest difference between cross-platform and hybrid is the improvement made on user interfaces experience. Cross-platform is no longer browser-based, indeed, it provides a common set of framework for user interface development, within which native user interface could be written, greatly rectifies the deficiencies of hybrid app in user experience. Development frameworks for cross-platform apps, for example, include React native of Facebook, Xamarin of Microsoft, Flutter and Vue Native of Google.

Although these development frameworks claim themselves to be development tools for native apps, being able to create a comparable user experience and efficiently utilize mobile phone features like native apps do, it still takes months for cross-platform apps to support the latest features added to mobile devices, falling way behind native apps do. If your business pursues timely support for the latest mobile phone features in your app, you may think twice if cross-platform is the best choice for you.

Even so, cross-platform apps have already met over 90% of user requirements. Popular apps we use in everyday life such as Instagram, Evernote, UBER, Twitter and Netflix are all cross-platform, without doubt cross-platform apps have mainstreamed in the mode of apps development.


From Web Apps to Progressive Web Application (PWA)

(Source: https://developers.google.com/web/progressive-web-apps/)

Web apps are, simply defined, webpages. But most of these webpages are built under the framework of Single Page Applications (SPA) and could bring users an impression and feeling similar to mobile apps, along with the improving technical capability of mobile browsers in recent years.

When it comes to user interface experience, web apps still perform below the before mentioned apps even with the improvement in current mobile browsers. Web apps also face limitations in function diversity, like failing to read QR codes, receive messages from Bluetooth devices and process payment through Apple Store/Play Store. But if you are planning to launch an app featured with simple data like text and images, web app is definitely the one for you.

Based on the characteristics of web apps, iOS and Android took corresponding actions in enhancing their capabilities and bring Progressive Web App (“PWA”) to the world. When you browse through iOS’s Safari or of Android’s Chrome, you can select and add any webpage to the screen of your mobile phone, and the webpage will then pop up in a look similar to mobile app. PWA looks exactly the same as other apps in the eyes of general users, with PWA, you can even use the features originally provided by native apps only, such as pushing messages, retrieving coordinates, taking photos and making use of the mobile compass function.

Another breakthrough achieved by web apps and PWA is that no download from App Store is required. Users have thousands reasons refusing to download an app, say limited Internet access, inadequate phone memory or having too many apps and one more is just too much. Web apps and PWA kick all these concerns out, to start with, users simply need a second to scan a QR code or search on Google. Such a fast and convenient experience in starting an app is definitely enjoyable to customers when promoting your new products.

Perhaps the most surprising thing is that web apps take the least time and cost among all types of apps development. Web apps support nearly all mobile phone platforms and desktop computers at minimum cost, are well-suited for services such as online shopping and room booking that do not engage exclusive features or functions of mobile phones. To get a taste of PWA, try Starbuck’s website at https://app.starbucks.com.


PowerApps

Besides apps designed for the public, many enterprises actively seek apps designed for internal use to facilitate corporate management and operation, particularly in supporting staff to claim reimbursement and apply for leave. PowerApps of Microsoft is what you are searching for.

PowerApps are affiliated to Microsoft Office 365. To begin with, staff only needs to download PowerApps from Apple Store/Play Store and login their accounts to a simplified user interface provided by PowerApps, on which staff could manage daily office matters through the small-sized applications pre-installed by administrators. PowerApps also collaborate and couple with OneDrive, SharePoint and Power BI of Office 365 to form an integral system, facilitating administrators and managers to extract data and reports for better understanding on the operation of the whole company.

The development cost of PowerApps is around 20% of general software applications, however the bundled cost of regular subscription fee for Microsoft Office 365 counts, as every PowerApps account must be linked to an Office 365 account. That’s a generous sum of money. But if your business is an existing customer of Office 365 and you are looking for applications to facilitate daily office operation, PowerApps works for you.


Game Development Engine

Unity and Unreal Engine are specifically designed for game development, supporting mobile apps as well as gaming platforms like PlayStation, Switch and Steam, commonly used in developing cross-platform games. Unity and Unreal Engine are strong in 3D presentation and game computing that are compatible with both game development and mobile apps, their hottest game creations include Minecraft and PUBG.


Summary

web software的圖片搜尋結果
(Source: https://collectivedata.com/technology/web-vs-web-enabled/ )

Yes, we know, there are many choices. To find out the one that suits you best, making the most efficient use of your precious time and money, feel free to contact us ONES Software for enquiries. We are here to provide our expertise in mobile apps development.

To find out more features and details of Bookings ONE, contact us at:

Enquiry Hotline/Whatsapp: (+852) 5538 3410

Email: hello@ones.software

Website: https://ones.software/

]]>

甚麼是前端開發?

(Ref:https://flatironschool.com/blog/front-end-vs-back-end-development/

如果有接觸過網頁開發的讀者,或者會聽過很多不同的專有名詞,其中不少得Front-end (前端) 和 Back-end (後端)這兩個字詞。有一些網站可能只需要設計師和前端開發者,有些則需要後端開發者和測試人員等等,那究竟前端和後端如何分辨?首先,讓我們搞清楚前端開發是什麼一回事。


Front-end 前端開發

(Ref: http://devana.rs/blog/front-end-interaction-designer/

前端包含所有用家能夠見到、繼而互動的畫面,而現今的網頁主要仍是利用HTML、CSS 和 Javascript 來建構這些畫面。

HTML相信即使不是程式員都不陌生,HTML 全名是 Hypertext Markup Language(超文件標示語言),是建立網頁的標準標示語言,簡單來說就是一個網頁的骨幹。早期的網頁,如這個有關WWW萬維網的網站(連結),主要只有文字,充其量會有一些圖像,所以畫面比較乏味,如下面的例子1a)。於是,就有CSS的誕生了。

1a) 只使用HTML的網頁 :https://codepen.io/OnesSoftware/pen/wVKvxx

CSS 於 1998年出現, 全名是 Cascading Style Sheets(層疊樣式表), 一種用來為例如HTML、XML 等這些結構化文件添加樣式的電腦語言,亦即是一個網頁的表皮/裝飾

在CSS 誕生前,要控制網頁如何顯示,就要在HTML檔案內包含顯示的資訊,例如字型的大小和顏色、背景應該是怎樣的、如何排列等等,這些都必須逐一在HTML檔案內列出。有時會因為資訊重複列出而令到網站過份冗長。CSS的出現使開發者可以將大部分這些顯示用的資訊中隔離出來,從而簡化 HTML 的檔案。這些資訊會被放在一個輔助的,用CSS語言寫的檔案中。理想來說, 現在的HTML檔案中應該只包含結構和內容的資訊,而CSS檔案中就包含樣式的資訊,以達致分工的目的。

1b) 使用了 HTML 和 CSS 的網頁: https://codepen.io/OnesSoftware/pen/rXOajM

在上面的例子1b),是將純粹使用HTML作為框架的 1a),加上 CSS 的裝飾,例如文字顏色、 邊框和背景顏色。

網頁的骨幹和表皮都有了,已經可以製作一些漂亮的靜態頁面,但如果要有一些能夠互動的部分,例如持續取得一些即時的資訊、儲存數據,甚至只是按下按鈕時彈出對話框,只用HTML和CSS的話都難以實行。 JavaScript 就正正能夠補充給予網頁「肌肉」並得以「活動」這個角色了。

1995 面世的 JavaScript 主要用作管理網頁的內容以及用戶的操作行為,而由於不同PHP、ASP的伺服器端手稿語言,不需要伺服器的支援也能夠在用戶的瀏覽器上運行,所以的確能夠減少對伺服器的負擔。

1c) 使用 HTML 、CSS 和 JavaScript 的網頁:https://codepen.io/OnesSoftware/pen/WVrwbv

在上面的例子 1c) 中,加了JavaScript 的輔助後,按下按鈕就會彈出「clicked」的對話框。

UI 與 UX 的比較

時至今日,前端的技術不斷轉變, 中間有過Flash、 Silverlight 這類 Web前端應用程式的開發解決方案曾經稱霸多年,卻因為手機平台不支援等因素而被淘汰。反而最基礎的 HTML、JavaScript、CSS不斷改進,以致如播放實時影片、繪圖、動畫等的功能都無須額外方案處理。而現在有不少 framework 和 library,如 ReactJS/Bootstrap 等等,能夠提供規格化的開發資源,使得開發的效率和水準得以大大提升。

前端開發者的主要職責,除了負責網頁的內容如何擺放,亦即所謂的 User Interface(使用者介面),也要照顧到用戶的瀏覽體驗,那就是 User EXperience(使用者體驗),這就要和專門的 UI、UX 設計師合作才得以處理得宜。前端開發者也要和後端開發者處理前後端之間的編程介面(API),使得有需要數據得以儲存、獲取和處理等等。

有興趣理解前端開發者的技術路線圖,可以看:

https://github.com/goodjack/developer-roadmap-chinese/blob/master/chinese-version/images/frontend.png

Ref:

https://zh.wikipedia.org/wiki/HTML

https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8

https://www.pluralsight.com/blog/film-games/whats-difference-front-end-back-end

https://flatironschool.com/blog/front-end-vs-back-end-development/

更多資訊可以留意 ONES Publication 定期發佈的文章,亦可以聯絡我們,我們的網址是: https://ones.software

ONES Publication
We share what we have learned about app and web development. Find us in ones.software. Email: hello@ones.software

聯絡我們:
主頁: https://ones.software/hk/
電郵地址: hello@ones.software
電話號碼: (+852) 5538 3410
Contact us:
Homepage: https://ones.software/
Email address: hello@ones.software
Phone number: (+852) 5538 3410

]]>

Angular 8.0 迎來的新 rendering engine:Angular Ivy

近年大約六個月一次的 Angular 重要版本更新很快就要來了! 其中最矚目的莫過於Angular v2 第三代的 rendering engine : Angular Ivy ,當中有什麼值得我們留意的?


Angular Ivy 早在 2018 年的 4 月 的 Ng-conf 中就公佈了。有新的 rendering engine 出現,官方所強調的都莫過於容量細、速度較快、編碼層面上更簡單。不過,有幾點是 Angular 今次想透過 Ivy 來解決的:

  1. Ivy 為了改善用家體驗,使瀏覽器需要下載的內容更少,從而使應用程式的啟動時間加快。
  2. Ivy 通過簡化 API 和 構建系統(build system),幫助開發人員更容易編寫源碼。
  3. Ivy 通過將編譯管道(compilation pipeline)變得更平易近人,使得第三方的開發更為可能,有助 Angular 社區發展。

不過新事物的出現,程式員第一樣關心的事情就是用不用改之前的代碼?答案是:

100% Backwards Compatible!

皆因 Google 本身也有 600+ 個服務都是用 Angular 來編寫,Google 亦不容許當新的 Angular 版本推出時,仍然使用舊的版本,所以 Angular 幾乎不可能做出一個具斷裂性的改變,所以各位程式員請放心使用。

在編碼層面上,Ivy 有幾個重大的更新,其中包括:

  1. Locality
  2. Tree-Shaking
  3. Low Memory Footprint

Locality

「locality」看來是 Angular 開發團隊所提出的新名詞,這裡容許我譯作為局部性局部性的意思是指當 Angular 的編譯器(compiler)翻譯模板(template)的時候,編譯器只會允許使用對其來說是 屬於該局部local)的信息,亦即是那些由其 component decorator 與 class 所定義的信息。當需要重新編譯某一組件時,因為不直接關聯的依賴(dependency)不會牽涉在編譯的過程之內,所以就能夠實行累加組建(incremental build,毋須每次都要渲染一整個全新的 virtual DOM tree,重新編譯的時間較短,產生出來的代碼體積亦較小。

Ng-conf 亦提到局部性的其他好處:

  1. 允許第三方的 library 將預先編譯好的模板,直接發送到 NPM。對於使用這些 library 的應用程式來說,能夠簡化和加速編譯過程。
  2. AoT / JIT 所產生代碼近乎一樣,使開發、測試時能夠容易地合用這兩種代碼。
  3. metadata.json 消失了,這大大簡化第三方 library 的發佈及開發,以及和現存工具鏈(tool chain)的互用性
  4. 大量減省編譯圖(compilation graph),這能簡化組建工具,重建大型項目的時間亦能縮短。
  5. 允許元編程(meta-programming),能夠令 component 可以在執行期(run time)內創建,Higher Order Components 亦能完全實現。

Tree-Shaking

比起大量運用 Virtual DOM 的主流 framework,Ivy 所用的 incremental DOM 更有利於Tree-Shaking。Tree-Shaking 是 死碼刪除 (Dead code elimination/DCE) 的一種, 它的用途是移除對程式執行結果沒有任何影響的源碼。不過相對於傳統DCE 只是移除永遠不能執行的代碼,Tree-Shaking 能夠從程式的入口點開始,並且透過 靜態程式分析 (Static program analysis)來移除不會執行的代碼。 上代的 Renderer2 和 Ivy Render 同樣都有運用Tree-Shaking,但 Ivy 將源碼分解為更細小、更原子化的 function,更有利 Tree-Shaking 的運用,從而產生更小的 bundle。

以下的 Angular 特性都是能夠被 Tree-Shaking:

  • Template syntax
  • Dependency injection
  • Content projection
  • Structural directives
  • Life cycle hooks
  • Pipes
  • Queries
  • Listeners
Source: ngConf-2018 keynote

譬如上圖的例子,由於只有 someFnmain 引用,而 unusedFn 沒有,所以最終Ivy Render 編譯出來的bundle 就不會包含unusedFn這個 function了。

Source: ngConf-2018 keynote

但如果 unusedFn 牽涉到條件上的檢查,即使條件最終為false而不會用到unusedFn,Ivy Render 編譯出來的bundle 仍然會保留unusedFn。基於靜態程式分析只會嘗試在不實際運行程式的情況下,找出所需內容,而它通常要假設最壞的情況以確保編譯出來的程式是正確無誤,Ivy Render並不會清楚在 runtime 時該值為何,就會保留unusedFn。所以編寫源碼時就要避免這種情況,不要過份依賴 Ivy Render 的 Tree-Shaking。


Low Memory Footprint

Memory Footprint ( 記憶足跡指的是一個程式在運行時所需/引用的主記憶體數量,而使用 incremental DOM 的 Ivy 就能降低記憶足跡。

主流 framework 所使用的 virtual DOM 在每一次重新渲染的時候,會整棵DOM tree 也會重新建立一次。

(From: https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36

而 incremental DOM 因為當 DOM 節點有加減才需要分配記憶體,除此之外就無需使用內存空間。而由於大部分的渲染和模板調用( template calls)都毋須DOM 節點上的改變,相對地就能大幅減少運行程式時的記憶體。

(From: https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36

Angular v8-rc4 版本在 May 16, 2019 已經發佈,Angular v8 相信很快就會推出,我們相當期待正式版的 Ivy rendering engine 讓程式員毋須大量重寫源碼,就能夠更有效運用前台資源。

更多資訊可以留意 ONES Publication 定期發佈的文章,亦可以聯絡我們,我們的網址是: https://ones.software

Ref:

https://juristr.com/blog/2019/05/Angular-8-and-the-Future-NGConf-2019-Roundup/#ivy-features

https://is-angular-ivy-ready.firebaseapp.com/#/status

https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7

https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36

https://medium.com/grapecity/what-to-expect-in-angular-8-940b217b63cb

https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking

https://www.telerik.com/blogs/an-early-look-at-angular-8-get-ready-for-opt-in-ivy-preview

https://www.zhihu.com/question/266923267/answer/316279829

https://www.telerik.com/blogs/first-look-angular-ivy

https://juejin.im/entry/5c01665a51882516cd70c661

https://blog.nrwl.io/metaprogramming-higher-order-components-and-mixins-with-angular-ivy-75748fcbc310

https://blog.angularindepth.com/ivy-engine-in-angular-first-in-depth-look-at-compilation-runtime-and-change-detection-876751edd9fd

https://blog.angularindepth.com/inside-ivy-exploring-the-new-angular-compiler-ebf85141cee1

]]>