【问题标题】:HTML reuse and maintenance with Play! framework使用 Play 进行 HTML 重用和维护!框架
【发布时间】:2016-01-22 17:29:18
【问题描述】:

我们的产品开发团队一直在讨论 html 的可维护性和重用性。为了设置上下文,我们从 HTML5/CSS3 前端开始,在 Play MVC 下使用纯 JS,而后者又使用 RESTful 后端。然后我们考虑添加 AngularJS 并采用混合方法,只是意识到两个强大的 MVC 框架不一定可以一起工作,你必须选择一个。因此,出于性能和类型安全等问题,我们决定使用 Play 框架和基于 Scala 的模板。

挑战如下:我们希望创建可重用的 Web 组件,就像 Apache Tiles 一样,以便可以重用常见的元素,如页眉、菜单、页脚等。这些组件已准备好在 Play 中运行,可以添加动态内容以服务于整个页面。

这可以吗?如果是,怎么做?

其次,播放模板似乎让您回到过去,因为它们不允许在 html 中分离关注点。因此,为了重新设计或改进 html 内容,html 开发人员将不得不处理模板或将新的 html 与现有模板合并。如何简化这个过程?

【问题讨论】:

    标签: scala playframework tiles reusability maintainability


    【解决方案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>
    }
    

    还有其他方法可以考虑:

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

    【讨论】:

      【解决方案2】:

      下面是一个快速的答案。如果您对Yeoman 感到满意,您可以将大部分 UI 部分保留在现有的 HTML 中,同时使用 Scala 模板渲染一些页面。我会推荐Play-yeoman,它可以帮助您——以最小的努力——重用UI 组件。

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

      【讨论】:

        猜你喜欢
        • 2015-04-25
        • 2014-07-24
        • 1970-01-01
        • 1970-01-01
        • 2016-09-24
        • 1970-01-01
        • 2012-02-17
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多