These are chat archives for angular/angular-2-ionic-2

25th
Feb 2018
Owen Melbourne
@OwenMelbz
Feb 25 11:25
owen_mac-n-cheese____Desktop_empire-companion__zsh__and_TinyPNG_–_Compress_PNG_images_while_preserving_transparency.png
anybody had this before?
philly-vanilly
@philly-vanilly
Feb 25 11:28
Is Ionic suitable to develop a web-app? I see when you install it with the cli, it removes or replaces certain angular features instead of just extending it. Angular Universal (SSR) is not usable for example. Lazy-Loading and i18n seems to be worse than the solution from the Angular team as well. So is it common to develop for mobile with Ionic and manually port everything to a second project which is just for the website? Or do most teams just deal with the shortcomings and build for web in the ionic project?
UncertaintyP
@UncertaintyP
Feb 25 11:29
Yea, it ended up being an error on their site, but dunno if they currently have this again. Just make sure your image follows exactly the specifications
Owen Melbourne
@OwenMelbz
Feb 25 11:30
dno if its coincidence but i just compressed the splash image before running it, originally was 3.2mb - so wonder if it hit upload limit
UncertaintyP
@UncertaintyP
Feb 25 11:31
Its working now?
Owen Melbourne
@OwenMelbz
Feb 25 11:31
yeah when i ran with a 700kb file, failed with the 3.2mb
UncertaintyP
@UncertaintyP
Feb 25 11:32
strange error message then, but yeah could be
Owen Melbourne
@OwenMelbz
Feb 25 11:34
if the server doesnt accept post sizes larger than X meg, then it would never have gotten to their actual backend, so would explain why it said no file found
UncertaintyP
@UncertaintyP
Feb 25 11:48
@philly-vanilly You can certainly create a web-app with ionic ( https://github.com/shprink/ionic-angular-twitter-pwa as an example for a high performance PWA ). Depending on the complexity of the app you can use the same codebase for web and mobile. Out of curiosity, what's the problem with Ionic's AoT compiler?
philly-vanilly
@philly-vanilly
Feb 25 12:18
@UncertaintyP its less the compiler and more the fact that I have to bind myself to another framework (on top of Angular and on top of cordova) which I am bound to use for the rest of the project. When you say using the codebase, what do you mean by that? To manually port the code from the native Ionic Project? Or to extend it somehow? Is that even possible when I am bound to use pages instead of url-routing?
Owen Melbourne
@OwenMelbz
Feb 25 12:19
maybe think about what exactly do you want from ionic e.g what part do you think you'll benefit from? then decide if using the whole thing is then what you need, maybe you just want the css from it for example
philly-vanilly
@philly-vanilly
Feb 25 12:22
Well that is the question. I guess at some point the app will need mobile camera access and communication with google maps. Apart from that the mobile and web app should be pretty similar.
The important thing is to start with something I guess and see how it goes, if you can attract customers or not. But if you suddenly realize your web app is more important than the mobile apps and you need to make bigger adjustments to it, you would have a problem.
Owen Melbourne
@OwenMelbz
Feb 25 12:27
depending what google maps access you want, obviously you have the whole google maps javascript sdk, which is vanilla js
then with photos, you can have a file input - which on ios shows the take photo button
dno what does on apple
android sorry
philly-vanilly
@philly-vanilly
Feb 25 12:27
What I don't understand is: do you make adjustments for the web-app (what @UncertaintyP meant by using the codebase) in the ionic project and simply deploy the www-folder into production or do you create a separate project just for the web-app?
Owen Melbourne
@OwenMelbz
Feb 25 12:28
i think the idea is you do just deploy the www folder
well, you do the ionic cordova build browser i imagine
and should give you a bundle to upload
you probably will need switches in the code in some instances for functionality that is completely native
philly-vanilly
@philly-vanilly
Feb 25 12:31
I guessed so. So I need to make a list which web-app features ionic removes from Angular and which it adds to it and see if this approach is feasible
Owen Melbourne
@OwenMelbz
Feb 25 12:32
im only new to this, but from the code i've seen, i thought it just imports angular directly, so dont think it removes anything
e.g first line is always import { Component } from '@angular/core'; so its got full angular in it
philly-vanilly
@philly-vanilly
Feb 25 12:33
Its a bit frustrating, I think you should develop browser-first nowadays, considering PWAs will replace mobile apps in the future. the only reason to develop for mobile is the marketing via appstore/google-play
Yeah but Components are not the only thing Angular offers
There is the routermodule, the httpmodule, i18n etc
Angular Universal for server-side rendering as well
At least you can use NGRX and MOBX in Ionic, I just googled
Owen Melbourne
@OwenMelbz
Feb 25 12:38

As the live reloading system seems to only work for browser development, and it comes bundled with pwa manifests, service workers etc - id say 99% of these are built browser first. so i wouldnt worry about that - especially as ionic just renders a webview anyway, so its gonna be completely browser first really.

then http and i18n are deffo all in their, maybe if you spin up the "super" demo, that includes loads of stuff, you can see a list of stuff it uses maybe.

I imagine the router is different though, but that would be because it needs to be optimised for multi platform stuff, e.g tab navigation etc.

and obvs SSR is gonna be different - but using the service worker you'd be able to cache all the views anyway making the performance differences probably unnoticable

plus you said browser first :P SSR wouldnt be browser if its rendering it server side :D
philly-vanilly
@philly-vanilly
Feb 25 12:40
yeah those are good points, thanks
haha yes
have you tried out ngrx in ionic yet?
UncertaintyP
@UncertaintyP
Feb 25 12:41
Browser first?! Really guys?! :D
Owen Melbourne
@OwenMelbz
Feb 25 12:42
oh i'd literally never used angular, ionic or typescript until about 3-4 days ago lol so no never even heard of ngrx - im typically a php and frontend developer :D
UncertaintyP
@UncertaintyP
Feb 25 12:42
Yes you can use ngrx without any problems
philly-vanilly
@philly-vanilly
Feb 25 12:43
I never worked frontend until a year ago, since then full time Angular dev. That is frontend too ;)
@UncertaintyP So is a page equal to a business-module in ionic, when you use redux?
Owen Melbourne
@OwenMelbz
Feb 25 12:44
ha okay, as in tend to build "websites and platforms using js when needed" rather than "javascript powered web applications" :P if that makes sense
philly-vanilly
@philly-vanilly
Feb 25 12:45
As I know redux/ngrx you use it for communication between business modules (which are usually lazily loaded). and for communication inside the module you just use inputs and outputs
UncertaintyP
@UncertaintyP
Feb 25 12:45
Haven't heard of business module before :/
philly-vanilly
@philly-vanilly
Feb 25 12:46
@UncertaintyP In Angular we call business modules the ones that subscribe to the store and dispatch actions, while the underlying modules are mostly UI, just displaying data passed from above
UncertaintyP
@UncertaintyP
Feb 25 12:47
Yes then a page is similar to a business module
They subscribe to the store and display their information in dumb components
philly-vanilly
@philly-vanilly
Feb 25 12:49
ah thank you for clarifying.
philly-vanilly
@philly-vanilly
Feb 25 12:58
eh, can a page contain another page?
UncertaintyP
@UncertaintyP
Feb 25 13:01
In special occasions only, like a tab
philly-vanilly
@philly-vanilly
Feb 25 13:03
hmm. in Angular its possible to nest lazily-loaded modules. we do that usually when modules get to complicated, to separate dependencies. but I guess with a tab its more of a technical reason
UncertaintyP
@UncertaintyP
Feb 25 13:03
You can nest components though as you like
philly-vanilly
@philly-vanilly
Feb 25 13:04
but what if I want to reuse them in multiple pages?
UncertaintyP
@UncertaintyP
Feb 25 13:04
You do that
philly-vanilly
@philly-vanilly
Feb 25 13:04
ah yes, stupid question
in angular i would reuse ui-components as well, but never reuse business ones
UncertaintyP
@UncertaintyP
Feb 25 13:05
Yeah the page approach is something to get used to probably when coming from angular :D
Why do you want to use Ionic in the first place?
philly-vanilly
@philly-vanilly
Feb 25 13:10
for developing for mobile
UncertaintyP
@UncertaintyP
Feb 25 13:10
No I mean why chose Ionic on top of Angular
philly-vanilly
@philly-vanilly
Feb 25 13:11
From what I have seen it seems to be the most advanced framwork on top of cordova
UncertaintyP
@UncertaintyP
Feb 25 13:13
That are all reasons to use Angular, you seem to have some background in it so why put specifically Ionic on top of it
philly-vanilly
@philly-vanilly
Feb 25 13:13
What other alternatives are there? For ReactNative I need to know React, for Week, Vue.JS. have not looked into NativeScript yet
you mean bootstrap an angular app with cordova, without any additional framework?
UncertaintyP
@UncertaintyP
Feb 25 13:17
Yeah or a framework that offers just some UI components
philly-vanilly
@philly-vanilly
Feb 25 13:19
I need to look into that first. I have not decided whether (or how: as pute component library or full) to use Ionic or not, that was my original question. I still need to learn how a mobile app benefits from that pages feature and other ones that come with full-ionic and then decide
UncertaintyP
@UncertaintyP
Feb 25 13:22
I see
Owen Melbourne
@OwenMelbz
Feb 25 16:33
@philly-vanilly i've found spending a couple of hours trying to rebuild something in is a project that you've already built was a good way to get head into things, e.g we had built an api, for a swift and java app, so we knew it worked and was well tested. so then just started using the existing api to see how to do things
philly-vanilly
@philly-vanilly
Feb 25 16:42
@OwenMelbz yes building an app is sometimes very easy once you know where what belongs to. a colleague of mine has rebuilt an enterprise app of two years in two weeks at his former job, switching to a different framework. The problem I see is more of maintaining two apps (mobile and web) at the same time
Owen Melbourne
@OwenMelbz
Feb 25 19:37
anybody know if theres a decent chrome extension for viewing the apps state? I looked at Augury and Batarang, but they seem to be utter useless, was hoping for something like vuejs dev tools, so like you can click a component and view the state of it, e.g see the arrays, models and their values etc
philly-vanilly
@philly-vanilly
Feb 25 21:22
if you use ngrx, redux dev tools
Owen Melbourne
@OwenMelbz
Feb 25 21:42
i do not lol
UncertaintyP
@UncertaintyP
Feb 25 22:26
It's Augury but rangle/augury#1253 also doesn't work with other versions of angular/ionic you need to be some kind of lucky I guess :D
Owen Melbourne
@OwenMelbz
Feb 25 22:31
oh, so its just not working right now, hey ho. back to the olll console.log!