Angular 2:关于HMR和@ ngrx/store的问题

问题描述

开始之前，此链接可能有用:.

我在大型项目管理/构思方面没有丰富的经验.我还很年轻，留着漂亮的胡须.所以我在这里，寻求建议.

我正在寻找和思考角度2的种子，我想知道如果使用HMR是开发大型应用程序的可行选择以及如何做到这一点.

I am looking and thinking at this seed of angular 2 and I am wondering if using HMR is a viable option to develop a large application and how to do that.

这些不过是我的事，我只想与您讨论以做出决定.我们都需要交流我们的经验:-)

基于此示例:

@Component({
  selector: 'home',
  templateUrl: `
    <form (ngSubmit)="submitState(localState.value)" autocomplete="off">

      <input
        [value]="localState.value"
        (input)="localState.value = $event.target.value"
        placeholder="Submit Local State to App State">

      <button>Submit Value</button>
    </form>
  `
})
export class HomeComponent {
  localState = { value: '' };

  constructor(public appState: AppState, public title: Title) {}

  onSubmit(value: string) {
    this.appState.set('value', value);
    this.localState.value = '';
  }
}

通过使用appState，可以动态地重新加载组件并可以注入数据.听起来不错.但是，这是我的第一个问题:要启用此功能，组件必须在appstate树中占有一席之地，因此，像示例中那样使用localState是个好主意. 这迫使我们在组件内部玩一个对象，这个对象可能很大.可能很烦人.您是否同意??在大型应用程序上会出现问题吗? (我将在大型应用程序上工作).

By using the appState, components can be dynamically reloaded and data can be injected. That sounds cool. But here is my first question : to enable this feature, components have to have a place in the appstate tree, so it's a good idea to use a localState like in the example. This force us to play with an object inside our components, which can be huge. It can be annoying. Do you agree with that ? Can it be an issue on a large application ? (I'm going to work on a large app).

这没什么，因为我只需要在我的localStorage中存储要由HMR跟踪的数据.那为什么不呢?

It can be nothing because I only have to store in my localStorage data which I want to be tracked by HMR. So why not.

谈到存储，我还将@ ngrx/store用作Redux的实现.这似乎是一个非常好的主意，因为状态可以是我的localStorage.当应用程序更新时，我只需要补充水分即可使用. hmr不会跟踪组件中的数据，只会跟踪状态.

Speaking about storage, I am also using @ngrx/store as an implementation of Redux. It seems to be a really good idea because the state can be my localStorage. When the app is updated, I just need to rehydrate my state and it works. Data in component will not be tracked by hmr, only the state will be.

听起来不错.但这是个好主意吗?我试图找到一个连接器来处理@ ngrx/store与hmr之间的通信. 胜利！，但此软件包似乎已过时.

Sounds great. But is it a good idea ? I've tried to find a connector to take care about communications between @ngrx/store and hmr. Victory ! but this package seems to be outdated.

我可以自己做，但这是个好主意吗? Angular的服务将使用reducer，我可以找到钩子来更新hmr的状态.

I can do this by myself but is it a good idea ? Angular's services will use reducers and I can find hooks to update hmr's state.

我认为@ ngrx/store和hmr被有角度的开发者所熟知.这两种技术看起来很合适，但是我在这里找不到很多资源.因此，我认为肯定有一个我现在看不到的问题.

I think that @ngrx/store and hmr are well kwnon by angular developpers. Those 2 technologies seems to fit well but I don't find a lot of ressources over here. So I'm thinking there must be an issue I don't see right now.

我写这些都是为了向您询问有关您使用这些技术/问题的经验的建议.

I wrote all of this to ask you advices about your experience with those technologies / problematics.

您看到结合这些技术的缺点吗?我正在尝试，但无法考虑所有情况.这就是为什么我需要您的帮助.

Do you see cons to combine those technologies ? I'm experimenting but I can't think about all the cases. That is why I need your help.

• HMR准备好进行生产"了吗?
• 是否可以在@ ngrx/store中移动很多信息(诸如已选中此复选框"，此输入的当前值为foobar'..."之类的东西)
• 最重要:这些技术是否合适?

• Is HMR ready for "production" ?
• Is it okay to move a lot of information inside @ngrx/store (things like 'this checkbox is checked', 'the current value of this input is foobar'...)
• Most important : Do these technologies fit well ?

这些问题提醒我 https://github.com/CodeSequence/ngrx -store-hmr/issues/2 .

推荐答案

TL; DR - HMR(在大多数情况下)是您使用的工具发展.像没有它一样开发应用程序，不要对它的工作原理考虑得太多.如果出现问题，只需重新加载页面即可.从长远来看，它仍然可以为您节省很多时间...

角度应用程序很大(几兆字节)，编译它们需要时间. HMR在开发中用于加快速度，因此您不必每次更改代码时都需要等待几秒钟才能看到结果. HMR通过利用您已经在使用的加载程序(最常见的是webpack和/或systemjs)来工作.好吧，您可能知道这一切(;

Angular apps are big (few megabytes) and it takes time to compile them. HMR is used in development to speed up things so you don't have to wait few seconds to see the result each time you make a change in your code. HMR works by utilizing a loader you are already using (most commonly webpack and/or systemjs). OK, you probably know all this (;

我最近基于Systemjs实现了自定义HMR(使用 systemjs-hmr ).基本原则是:更改代码时，请通知加载程序并重新加载更改.剩下的只是清理工作，以确保您的应用程序仍在运行...

I recently implemented a custom HMR based on Systemjs (using systemjs-hmr). Basic principal is: when you change your code, notify the loader and reload changes. The rest is just cleanup to make sure your app is still working...

我的HMR非常简单:

• 重新加载已更改的应用程序代码(组件，服务，管道....)，
• 重新创建<app-root>，像这样，
• 使用 NgModuleRef.destory() ，
• 使用以下命令引导新应用:platformBrowserDynamic().bootstrapModule(AppModule).then(module => window['__HMR__'] = module)
• 获取@ngrx/store初始值

• reload changed app code (components, services, pipes....),
• recreate <app-root>, like this,
• destroy old app with NgModuleRef.destory(),
• bootstrap new app with: platformBrowserDynamic().bootstrapModule(AppModule).then(module => window['__HMR__'] = module)
• get @ngrx/store initial value

这是我使用的代码:

import { Store } from '@ngrx/store';
export function get__HMR__state() {
  let state = {};
  if (window['__HMR__']) {
    const module = window['__HMR__'];
    const store = module.injector.get(Store);
    store.take(1).subscribe(s => state = s);
  }
  return state;
}

@NgModule({
  imports: [
    StoreModule.provideStore(AppReducer, get__HMR__state())
  ]
})

我不会在我的应用程序中的AppState(ngrx/store)中存储不需要的任何内容.输入值和属性可以更好地处理像这样.

I don't store anything I don't need in my app in the AppState (ngrx/store). Inputs values and attributes are better handled like this.

它工作得很好，我通常会开始开发过程(使用自定义gulp构建工作流)，而在一天的余下时间里都忘了它；(确实会中断，特别是当我弄乱项目结构和依赖关系时，但是快速按F5一切都再次正常工作.当我使用模板和样式(如果必须等待很长时间才能进行更改，这是最痛苦的部分)时，重新加载可以正常工作.

It works pretty well, I usually start dev process (using custom gulp build workflow) and forget about it for the rest of the day (; Thing do break, specially when I mess with project structure and dependencies, but quick F5 and everything is working again. When I work with templates and styles (which is the most painful part if you have to wait long for changes) reloads work perfectly.

我正在使用angular-cli进行项目管理"，而当我使用它的ng serve(使用webpack)进行开发时，我会得到 3-8秒的重建时间+ 2-4秒的重新加载时间页面.那是我在代码中所做的任何更改.使用Gulp + HMR(在同一cli项目上)，我得到的重建时间为50-400ms + 200-500ms的重新加载时间.这很重要，也是我进行自定义构建的原因(；如果出现问题，请按F5键，然后在2-4秒后应用再次运行.

I'm using angular-cli for "project management" and when I develop with it's ng serve (which uses webpack) I get rebuild time of 3-8 seconds + 2-4 seconds to reload the page. That's for any change I make in code. With my Gulp+HMR (on the same cli project) I get rebuild time of 50-400ms + 200-500ms reload. Which is significant and the reason I made a custom build (; If things break, hit F5 and after 2-4 seconds app is working again.

最后，我强烈建议对那些每天花费几个小时进行编码的人使用HMR(;并不完美，但是没有工具，从长远来看，这可以节省很多时间.但是，请不要更改您的应用适合该工具.就像没有HMR一样编写代码.如果您需要其他功能而工具却无法做到，则可以随时对其进行扩展-它只是一个javascript(;

To close, I highly recommend HMR for anyone who spends few hours/day coding (; It is not perfect, but no tool is, and this one saves a lot of time on the long run. However, don't change your app to fit the tool. Write code as you would without HMR. If you need something extra and tool can't do that, you can always extend it - it's just a javascript (;

这篇关于Angular 2:关于HMR和@ ngrx/store的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！