search

angular / universal-starter

Angular Universal starter kit by @AngularClass
2.02k stars 688 forks source link

Universal App Architecture #411

Closed kahurangitama closed 7 years ago

kahurangitama commented 7 years ago

I'm new to universal apps and would ask you a question.

Is it a normal practice to write backend code, include packages like mongoose, redis, etc. and write API routes right in express application that universal-starter has? Is it possible or destiny of the main.server.ts in universal-starter is to be almost empty and handle only rendering of the angular app? Is it better to create separate express app for backend API? What is the best approach?

MarkPieszak commented 7 years ago

You could do it however you'd like, the main.servers job is to yes render the application to a string and pass it down to the browser. You can your entire backend app just be within this one express server, or have it in another one, or any other rest API framework (java, dotnet) you'd like. The sky's the limit 🙈

kahurangitama commented 7 years ago

@MarkPieszak thank you for your answer! Hope you point me with following questions also.

  1. All Angular UI frameworks like PrimeNg etc. have no support Universal, I mean if you try to compile server it will fail because of client global objects interactions within the UI lib. Does Angular Material 2 have support for Universal? Or any other library that I don't know about?

  2. I observed that it's quite slow to develop with webpack and I don't know why because my project is almost empty. I just install https://angular-maps.com/guides/getting-started/ and observed that when I run npm run build it takes 35 sec for every platform (client and server). This is not acceptable to wait so long before refresh on every change! I suppose I doing something wrong.

btw, my webpack.config is the same as in universal-starter repo. Should I perform some changes? Or maybe webpack best practices?

Thanks in advance!

MarkPieszak commented 7 years ago

Not a problem.

As for those frameworks, I'd suggest using either ngx-bootstrap (if you need Bootstrap3), and ng-bootstrap (if you can do Bootstrap4). Material should now be very close to working with Universal, I can't remember the state of it exactly off the top of my head.

As for the webpack setup it's currently not ideal in the starter, there are definitely improvements that could be made to speed things up. Such as vendor splitting, etc. (That would make HMR much much faster).

Any improvements you do have I'm sure we'd accept pull requests to improve the webpack configs! I'm guessing eventually we'll update them a little bit as well.

The other option you have is that the new @angular/cli (1.3) has experimental Universal support, so you might have a better time for now starting off with that one! Check it out 🎁

calebeaires commented 7 years ago

@MarkPieszak I have made some confusion about what Angular Universal really is. Is it just an pre-render application or it is a full secury server side endpoint?

Can I built an app using Angular Universal with no worries if the user (from browser) will know about my app logic? Can I replace my Express server side app with the Angular Universal?

MarkPieszak commented 7 years ago

You're going to add the serialization functionality of Universal to certain routes of your existing express app, so that those routes, let's say /products runs Universal and returns that HTML to the browser.

d668 commented 6 years ago

a follow-up, If I need to retrieve a user balance in ngOnInit and it involves DB call, naturally I want to do it first time using SSR and next time (for example when user switches to /account) on the client side. In both cases lets say I need to call some db.getBallance() method which has access to db login/password. Can you please suggest an architecture for that? Seems like a typical scenario. Thanks!