I'd like to create a mobile/cordova version of my Meteor web application. The web version uses blaze -- which I'd like to stick with -- and for the mobile app version Ionic seems like an excellent choice for UX. Ionic is more-or-less coupled with Angular which creates a templating conflict at runtime:
error: conflict: two packages included in the app (angular-templates and templating) are both trying to handle *.html
error: conflict: two packages included in the app (pbastowski:angular-babel and ecmascript) are both trying to handle *.js
Other than, say, forking my project to create a separate non-blaze repo, are there any ways to configure meteor to only use angular/babel if the app is running with cordova?
After a good bit of digging and research, this is what I've come to conclude:
It seems the typical solution to this kind of problem in Meteor is to disaggregate your application into a collection of packages.
With packages there is a greater control over how and where dependencies are loaded. So in this particular case, there'd be at least two packages -- one which contains browser specific code and another which contains Cordova specific code.
Here's one simple example of an application broken into packages supporting a mobile and web-based experiences: https://github.com/Compy/meteor-mobile-desktop
And here's a pretty comprehensive tutorial on breaking an existing application into a package based architecture: http://experimentsinmeteor.com/package-based-architecture/
Related
I'm about to go head first into doing a MAJOR versioning upgrade for a legacy Angular 4 app into an Angular 6 app. I figured I could push the envelope into version 6 at most without completeley bricking the app.
That said, I know I'm about to enter into some gotchas, so I'd like insight from seasoned JavaScript Developers who have already performed these game-breaking updates.
First, I do know that these assumptions are true:
https://update.angular.io/#4.4:6.1l3
I must be all in with the Angular CLI and how it operates. Everything from kickstarting your localhost, creating a new component, to building out the final web app.
Next, here are some things to know about the existing web app:
Angular 4.4.7
ES module loader is, SystemJS.
Source code sits in Bitbucket with a direct connection into a Microsoft Azure Web App provision (NodeJS). Once the final artifact is built out via gulp task, it ships automatically into the cloud.
This web app does NOT use the Angular CLI.
Finally, here is my desired upgrade path for the aforementioned app:
Angular 6.1
ES module loader will be, webpack.
Source code will still sit in Bitbucket with a direct connection into a Microsoft Azure Web App provision (NodeJS). I'd like the final artifact to be built out via gulp task (or whatever modern day task runner applies) it ships automatically into the cloud.
This web app does will leverage the Angular CLI.
Thanks in advance for your insight.
Just take a look at here: https://update.angular.io/
Those steps listed in that link usually work.
The one thing I can say is: upgrade to version 5 and, afterward, to version 6. I've tried before to upgrade by jumping intermediary versions (from 6 to 9) and it was a terrible experience that took me like almost 2 hours in a small project.
Is it possible to run two angular application with one is 1.6.4 and another one is 6.1? I also have global angular version 6.1. Can someone elaborate how it is possible or not?
You have two main roads.
The first one is to use the ng-upgrade approach: https://angular.io/guide/upgrade
With this approach, you can upgrade your angularjs components in order to be compatible with angular components, and you can downgrade your angular components in order to be compatible with angularjs.
A second road is to use web components, for an approach called micro apps or micro frontends.
In this way you will have a root application which embeds two different applications, inside two different web components, in your case one for angularjs and another one for angular, which can communicate each other through the root application.
The answer is Yes!
You can run as many different version of angular versions as possible, just ensure that the port on which these apps are running are different.
Angular cli 6.x will run all pre version you only will get a warning as version mismatch and a local angular cli version that related to your project will run;
Your global Angular CLI version (6.1.2) is greater than your local
version (1.6.4). The local Angular CLI version is used.
To disable this warning use "ng config -g cli.warnings.versionMismatch false".
Yes, of course it's possible. Take a look at this article: https://angular.io/guide/upgrade
And you can upgrade or downgrade services and components between two frameworks.
An application with two angulars is called a Hybrid Application
You should know that there are two ways to bootstrap a Hybrid App:
Using UpgradeModule - Bootstraps both the AngularJS (v1.6) and Angular (v6.1) frameworks in the Angular zone
Using DowngradeModule - Bootstraps AngularJS outside of the Angular zone and keeps the two change detection systems separate.
I have tried both ways. And I recommend using DowngradeModule - it's better for performance and memory leaks.
If you google angular hybrid you will find a lot of articles and examples on github
I'm a back-end java developer (spring boot) and currently I'm interested in building a single page application.
What I like about SPA frameworks (mostly Vue):
Model-binding (saves boilerplate code)
Components and templates (separating code in multiple files is always good, but I don't like single file components as I feel they mix the view and logic)
Routers
However, unless you are using Node there seems to be poor integration
What I don't like:
Node (I develop backend in Java so I don't want to install node just as a prerequisite for NPM)
NPM (I already have dependency management in Maven/Gradle. I actually don't mind it as much, I just don't want to install it and manage it seperately)
I understand why stuff like Node, Npm, Webpack is necessary, it's just that I've already have Java/Spring/Eclipse doing all that for me. I have no desire to have basically two separate build processes.
TLDR: I like the direction and architecture of modern frontend, I just don't want to deal with the tools that are used.
Specific Question: How can I develop a modern SPA using Spring Boot, Gradle/Maven and Vue.js and not have to install Node/Npm/Vue cli etc. What are the best tools if there are any?
Thank you.
You can use maven frontend plugin hosted from here.
It is maven plugin that is leveraging downloading nodejs, webpack, gulp, grunt and running it on your codebase.
You will be able to run maven build and nodejs will be downloaded automatically. It will run your frontend build as well and in resulting jar you will have only necessary minified files.
However, you have to be aware that if you want to debug your frontend application it is a good idea to have those things installed and being able to run the app locally without minification of html and js files.
If you don`t want to download tools you can use helper scripts provided by authors of this plugin to use tools downloaded by this plugin.
We are currently building our frontend js codebase (angularjs) using nodejs with grunt, which seems to be a popular setup, but we are not happy with this solution. Does anyone have suggestions for a build setup for e.g. linting, minimizing our js, running less, etc (in addition to some custom steps for angular in general and for our application specifically) without using nodejs at all?
I would leave it at that to avoid starting a flamewar, but here are, for context, some of the shortcomings of the current setup in our view:
grunt does not have even the basic functionality of a 1970s build system, like automatically re-building only files that have been modified based on file modification time
npm is causing constant headaches running on our build servers at every build
If grunt does not have even the basic functionality of a 1970s build system, why won't you use a 1970s build system then?
Just use make if that's what you're happy with. It still works fine. There's no reason not to use it if it you're satisfied with how it works.
I don't have experience in front-end but I want to create a simple app using Angular 2.
Why do I need to install Node.js as a prerequisite step? Why does Angular use Node.js?
There are a couple of things that Angular uses Node.js for:
Installing and managing packages. From the Quickstart tutorial:
Angular application developers rely on the npm package manager to install the libraries and packages their apps require. The Angular team recommends the starter-set of packages specified in the dependencies and devDependencies sections.
Compiling the TypeScript used into JavaScript that the browser understands - browsers can't process TypeScript natively and the SystemJS imports used in your code aren't supported in browsers yet:
We strongly recommend transpiling (AKA compiling) to JavaScript during a build phase before running the application for several reasons including:
We see compiler warnings and errors that are hidden from us in the browser.
Precompilation simplifies the module loading process and it's much easier to diagnose problems when this is a separate, external step.
Precompilation means a faster user experience because the browser doesn't waste time compiling.
We iterate development faster because we only recompile changed files. We notice the difference as soon as the app grows beyond a handful of files.
Precompilation fits into a continuous integration process of build, test, deploy.
node.js is required in order to install the library using the node package manager (npm).
It is not required to run an app using angular2, only to build it.
For any modern JS based application, as the complexity grows, the app becomes difficult to manage.
In order to make developing and managing complex applications simpler, there are frameworks such as Angular, React etc. and they provide number of tools for the same.
These tools are linting, scaffolding, running unit test cases, starting web server for local development, minify and creating build for the production use etc.
These tools are based on NodeJS as it is JavaScript only and therefore can be customize as per developers needs.
And that's the reason you need Node.js for Angular2 development.