Question

我们的产品开发团队一直在讨论HTML可维护性和重用问题。为了设置上下文，我们开始使用HTML MV / CSS3前端和Play MVC下的普通JS，后者又使用RESTful后端。然后我们想到将AngularJS添加到旋转中并采用混合方法只是为了意识到两个强大的MVC框架不一定一起工作而你必须选择一个。因此，对于其他问题的性能和类型安全性，我们决定使用Play框架和基于Scala的模板。

以下是挑战：我们希望像Apache Tiles一样创建可重用的Web组件，以便可以重用标题，菜单，页脚等常用元素。这些组件已准备就绪，可以添加动态内容以便为整个页面提供服务。

可以这样做吗？如果是，怎么样？

其次，播放模板似乎会把你带回来，因为他们不允许在html中分离关注点。因此，为了重新设计或改进html内容，html开发人员必须处理模板或将新的html与现有模板合并。如何使这个过程更容易？

Answer 1

我不知道Apache Tiles究竟是如何工作的，但是如果我理解正确的话，它提供了create pages using smaller components的方法（如标题，菜单，页脚等）和某种包含机制来粘合这些组件一起组成页面。

那就是说，你可以使用Twirl来实现同样的目的。您只需要declare reusable blocks可以在同一页面内使用，或者您可以使用Rails partials之类的内容，可以在不同的页面中重复使用。

我们来看一个例子。请考虑您有以下文件：

档案app/views/partials/header.scala.html：

<header>
  <h1>My Header</h1>
</header>

档案app/views/partials/navigation.scala.html：

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/profile">Profile</a></li>
    <li><a href="/faq">FAQ</a></li>
  </ul>
</nav>

档案app/views/partials/footer.scala.html：

<footer>
  Some copyright info
</footer>

档案app/views/main.scala.html：

@(title: String)(content: Html)

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
        <script src="@routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>
    </head>
    <body>
        @partials.header()
        @partials.navigation()

        @content

        @partials.footer()
    </body>
</html>

上面的文件不仅定义了一些可重用的部分模板（标题，导航和页脚），还定义了应用程序的所有页面都可以重用的公共布局（主要）。现在，让我们看一下使用上述结构的页面：

档案app/views/users/profile.scala.html：

@(user: models.User)

@main(title = "User Profile Page") {
  <h2>This is the profile page of @user.username</h2>
}

还有更多：因为视图被编译为Scala代码，您可以导入用Scala / Java编写的代码并直接从您的视图中调用它，例如Rails view helpers：

档案app/views/helpers/DateHelpers.scala：

package views.helpers

object DateHelpers {

  def formatToISO8601(date: Date) = {
    ??? // format the date
  }

}

让我们在app/views/users/profile.scala.html页面中使用此助手：

@(user: models.User)
@import controllers.DateHelpers._

@main(title = "User Profile Page") {
  <h2>This is the profile page of @user.username.</h2>

  <p>User since @formatToISO8601(user.createdAt)</p>
}

还有其他方法需要考虑：

Ping-Play: Big Pipe Streaming for the Play Framework
您可以创建与Apache Tiles集成的Play模块。我很确定这是可能的。

Answer 2

快速回答如下。如果您对Yeoman感到满意，则可以将大部分UI部分保留在现有HTML中，同时使用Scala模板呈现某些页面。我建议Play-yeoman，这可能有助于您尽可能少地重用UI组件。

例如，您可以轻松地将NodeJS + Angular应用程序转换为Play + Angular。 Play-yeoman插件有很多帮助。但它并不灵活，因为它不支持任何任意的Yeoman配置，只有Angular。

使用Play重用和维护HTML！骨架

2 个答案: