Search code examples
angularjsplayframeworkwebstorm

What is the optimal architecture combining Scala-Play and AngularJS?

I have recently worked in a pure Scala-Play application and later in a pure AngularJS application. I'm very impressed with both and I'm wondering what is the sweet spot of combining the two frameworks together. Since the two frameworks can be complementary but also overlapping in different areas e.g. MVC and page routing, as far as I know these are some of the possibilities:

  1. Single Page design, use AngularJS MVC-only and use Scala-Play as "dull" service layer backend with no full page refreshes.

  2. Allow page reloads and each page reload becomes a different AngularJS root application. This seems quite flexible e.g. the client side is not bloatted with so much data for larger applications but better partitioned for the different use-cases. The downside is that I'd need different AngularJS MVC applications and I'm not even sure how to organize it as a project. Are there examples of this?

  3. Typical server side Web App, use Play MVC-only and AngularJS for handling UI models for each separate page.

My choice of IDE for these types of architecture would of course be WebStorm but unfortunately I can't have all client-side (AngularJS and JavaScripts) and sever-side (Scala-Play) codes in a single project.

Solution

  • I believe that there is no the ultimate optimal architecture for combining Play and Angular. It depends on the specificity of the project, team etc.

    The decision to develop UI part with Angular and the server side back-end with Play is very reasonable. Technically it may be done as following:

    1. Development:

      • Both parts are developed as detached projects with the preferable IDE.

      • The client should have some entry point HTML page. It is reasonable to name it index.html, but is may be any other name.

    2. For client-server integration do on the Play side as following:

      • Select a sub-folder under the play application root, which will serve as the "home" for the client files. The default solution is to use the folder public, since all files under it are automatically deployed.
      • All client files should be copied under the public folder. The files may be organized in any structure.

      • Add a route for the default URL as a route to the index.html. The argument path in the route should be the full path of the index.html relatively to the application root. If index.html is directly in the public folder, the route is like this: 

        GET /defaultUrl   controllers.Assets.at(path="/public", file ="index.html")

      • Add routing to the client files:

        GET /*file  controllers.Assets.at(path="/public", file)

    Now the distribution package will include all the client files.

    Putting of the client files into the public folder should be done automatically, for example by organizing the client directory structure and appropriate configuration of the client IDE.

    You can find more examples in this post.