Angular2 Template App - javascript

I am new to Angular2 client side development and i want to have a sort of a base project structure so i could go on from there.
I have found that you could create the structure using yeoman and angular2 generator but it seems that it builds on top of very early version 2.0.x.
Maybe there is an up-to-date generator?
I have also found some examples on github but all of them vary a bit from each other when it comes to structure and the content.
Regarding the site that i am developing, it would be a small company website with some static content, blog with comments, polls and an ability to sign-up / log in (i will be using Play as the backend). Nothing special so i guess a single module angular2 app would do.
Thanks in advance for the advice and tips on this one.

Angular-cli will help you out. and its up-to-date regularly. also it will help you in production deployment. and much more things goes on.

If you want configurable build processes, it's better to start with https://github.com/angular/quickstart else go for angular-cli https://github.com/angular/angular-cli

Related

How to keep my React code from being minified on Github?

I'm fairly new on the React scene and just finished a few small react applications. I deployed two of these applications to Github Pages, and they both function perfectly.
However, I noticed that the files in my repository are minified. Not only that, but the language meter shows it as 100% html. It's nitpicky, but I'd like for it to display JavaScript/CSS too. I would greatly prefer my files be visible, just in case anyone wanted to look at how my application was built (mainly recruiters).
Is there some way to make these files visible/UNminified without sacrificing performance?
Is there any reason I wouldn't necessarily need to undertake this? --> (would employers care?)
You're committing your built project, but you should upload the source code!
To expose your github pages you have to build the project inside the docs folder, so you can have source code and build on the same branch!

Angular7 slow page load

I have an Angular7 app that was passed onto me. The First Contentful Paint and Time to Interactive is about 6 seconds! It seems to stall(pending) for about 4 seconds on https://www.google-analytics.com/collect and https://fonts.gstatic.com/s/opensans API call, which I found is related with google fonts. But this might not be the cause of the stall. I tried to use lazy loading modules to get bundle smaller. Currently we are at: styles.css 465B, runtime.js 1.1kB, polyfills.js 36kB, styles.js 10kB, vendor.js 583kB, main.js 142kB. Bundle size doesn't seem to be an issue but browser(chrome) still stalls for 6 seconds before user see the home page. Does anyone have any advise?
I also looked at SSR but it seems to be very complicated to setup considering we are serving on AWS S3 using content in dist. I am building with:
ng build --outputHashing=all --prod
Please help. I am want to make sure there is nothing else I can improve on before trying SSR. Thank you!
First of all, you can try and update Angular version to the latest, as it brings performance upgrades and bug fixes. That is what I would do before SSR. Nevertheless, SSR is a "must", if you want better user experience. Considering your bundle size, it is not so big. My app is triple size as yours and it loads faster. As I said, I render on server (SSR) and using v9 so far. But is very hard to answer the question without any code samples.
Cheers!
You can try to optimize your code a bit and use the AOT compilation mode in the time of building.
I found a good article, you can explore this and understand in what way exactly you can improve your code and reduce loading time.
https://www.dotnettricks.com/learn/angular/tips-to-optimize-your-angular-application

Integrating an Angular app with Vanilla JS webapp

I'm in need of your assistance.
Background
We have a legacy Vanilla JS webapp which we intent to replace with Angular. Due to time constraints we wish to do this gradually where we replace one isolated component at a time but also add new functionality as isolaed Angular apps.
The goals is of course to be able to completely move to Angular in a timeframe between 6-12 months.
Issue
I've been investigating how to seamlessly integrate an angular app with our vanilla js with webpack (which we are already using to build our app).
There has been no examples on how do this for Angular whereas I've seen examples for React.
The intention is to have a separate directory for the angular which is then bootstrapped when needed in the vanilla JS. We want to build the angular stuff alongside the rest in one aot js.
Consequences
The consequences I see is of course time to bootstrap the angular app but when using aot there should be not be much of an issue.
Solution??
This is where you guys come into play. How do we easily build the angular app together with the vanilla js app?
Ideally I want to somehow ng build --prod the angular app and then include the result in the vanilla js webpack dist.
Thanks in advance.
If I were you I would do the opposite : integrate the vanillaJS application into Angular.
As Lazar said, Angular is a platform. You code an application using Typescript.
The good news is, every valid JS code will be valid TS code. The opposite, on the other hand, isn't true.
So what I would do, is take my old application chunk by chunk, and put it in a new Angular application.
And I know you are using webpack and it might work great for you, but I highly recommend you to start from scratch with the CLI. Not only because it also uses Webpack, but because it represents 90% (arbitrary number, but not so far from it) of the Angular projects, meaning if you have any issue, there's a whole community that will be able to help you.
Without, of course, mentioning all the features such as i18n, server-side rendering, AOT ...

Integrating an operational transformation library with Meteor

When building apps with Meteor, its capabilities have really amazed me. However, to be able to drop in Etherpad-style collaborative editing bits into my app would really be a holy grail.
While looking up how to do this, I found some projects that seem to use OT libraries in meteor.
Projects using ot.js:
https://github.com/TeamCocoDojo/cocodojo (Demo at http://cocodojo.meteor.com)
Projects using ShareJS:
https://github.com/mad-eye/meteor-sharejs (Demo at http://madeye.io/)
I can't seem to tell how these projects integrate with Meteor. Are they actually using Meteor Collections? Do they just use the Node server that is hosting Meteor and do the OT as a separate component, not using Meteor at all? Is there a different OT library that integrates better with Meteor?
If anyone is familiar with these projects or has implemented OT as part of a Meteor app, please share your thoughts on the best way to approach this.
(This isn't a duplicate of Operational Transformation in Meteor.js? as that question is almost a year old and Meteor has moved a long way since then.)
I've started the process of integrating ShareJS with Meteor via a smart package:
https://github.com/mizzao/meteor-sharejs
Please try it out in your Meteor app, and submit new features!
Demo here:
http://documents.meteor.com

How best to share a QooXDoo using Git?

I'm developing a little project with QooXDoo and want to share the source with some friends. Should I just check in the whole project folder?
You should add the build and cache directories to the relevant .gitignore files (these directories they are the equivalent of 'object' files, so they should not be stored in version control unless you have a very good reason).
As for Qooxdoo itself, I usually place it next to the project so it's easy to duplicate the setup. I end up with something like this
/
tmp
qooxdoo-sdk-xxx
my-app-directory
HTH
I guess the best approach would be to just check in your application and a little instruction file how to setup a qooxdoo SDK.
This way the developers can work with your application locally and using a qooxdoo SDK to work against.
As long as you do not need to work against the current trunk it's better to work with the latest SDK.
See the download page at qooxdoo.org
you may want to have a look at remOcular a qooxdoo frontend with perl backend, complete with autoconf setup.

Categories