title: Best practice to create large web applications with multiple views, many components and nemory issues
body: <p>I am not sure how I should best structure my Vaadin Web application.</p>
  
  <p>Assuming in my web application, we have many different <code>View</code> objects with each lots of components. The components never change, but the data in the components changes upon every page enter. </p>
  
  <p>I am seeing two possibilities:</p>
  
  <ol>
  <li><p>Create and initialize all the objects once in the View's constructor. When the View's <code>enter(ViewChangeEvent event)</code> gets called, bind the data to the already existing objects. </p></li>
  <li><p>Do nothing in the View's constructor. Create all the components in the <code>enter(ViewChangeEvent event)</code> method, bind the data to these components.</p></li>
  </ol>
  
  <p>Simplified example of the two different approaches:</p>
  
  <p>public class OneView extends VerticalLayout implements View{</p>
  
  <pre><code>private TextField[] textfields = new TextField[VaadinprojectUI.TESTLIMIT];
  
  public OneView() {
      long startMs = Calendar.getInstance().getTimeInMillis();
      for (int i=0;i&lt;VaadinprojectUI.TESTLIMIT;i++){
          TextField txtField = new TextField("Textfield #" + i);
          textfields[i] = txtField;
          addComponent(txtField);
      }
      long finishMs = Calendar.getInstance().getTimeInMillis();
      System.out.println("OneView() - constructor" + (finishMs - startMs));
  }
  
  @Override
  public void enter(ViewChangeEvent event) {
      long startMs = Calendar.getInstance().getTimeInMillis();
      for (int i=0;i&lt;VaadinprojectUI.TESTLIMIT;i++){
          textfields[i].setValue((String.valueOf(Math.random()*1000)));
      }
      long finishMs = Calendar.getInstance().getTimeInMillis();
      System.out.println("OneView - enter()" + (finishMs - startMs));
  }
  </code></pre>
  
  <p>OneView will first create 1000 TextFields, add them to the VerticalLayout, and store them in an array for reuse. When OneView is navigated to, it will bind the data to the textfields.</p>
  
  <pre><code>public class TwoView extends VerticalLayout implements View{
  
      public TwoView() {
          //nothing in the constructor
      }
  
      @Override
      public void enter(ViewChangeEvent event) {
          long startMs = Calendar.getInstance().getTimeInMillis();
          //entire load is in the "enter", only called upon navigation. 
          for (int i=0;i&lt;VaadinprojectUI.TESTLIMIT;i++){
              TextField txtField = new TextField("Textfield #" + i);
              txtField.setValue((String.valueOf(Math.random()*1000)));
              addComponent(txtField);
          }
          long finishMs = Calendar.getInstance().getTimeInMillis();
          System.out.println("TwoView - enter()" + (finishMs - startMs));
      }
  </code></pre>
  
  <p>TwoView will not do anything in the constructor, but whenever it is navigated to, it will create 1000 TextFields, and bind the data to them. The textfields are not stored, and will be remade at another time.</p>
  
  <p><strong>Some testing, navigating back and forth:</strong></p>
  
  <pre><code>OneView() - constructor32
  OneView - enter()14
  TwoView - enter()28
  OneView - enter()5
  TwoView - enter()18
  OneView - enter()3
  TwoView - enter()12
  </code></pre>
  
  <p>Upon starting the application, OneView takes some time to create its TextFields. But after that, it always does a faster job to bind the data to its TextFields (which is expected). </p>
  
  <p>Questions: </p>
  
  <ul>
  <li><p>What are the tradeoffs with using the OneView system when it comes to memory management? Can we freely create View after View in large applications? I have a real world Vaadin application where we are getting OutOfMemoryErrors, and I feel maybe it's because I am reserving so much space for reusable components</p></li>
  <li><p>What happens when the page is left? In TwoView, I assume the Garbage Collection destroys everything and frees up the memory. In OneView, the TextFields remain in the memory with the data assigned to them. Is there something as an "exit()" event when the user leaves the View that we should use to clear the data in the components? I am thinking in cases of ComboBoxes or tables with lots of Objects in them, but that don't get cleared upon page leaving and clog up the memory because they won't get GC'd?</p></li>
  </ul>
  
  <p>Thanks for any advice</p>