Lift & AMP pages

[zaza]

Hi all,

I was wondering how to implement dynamic AMP pages with Lift.

Lift.js causes invalid AMP page. Did anyone has successfully managed that?

Another solution cloud be to generate plain html with a cron job.

Thanks,

Andrea

[Matt Farmer]

Excuse my ignorance. What is an AMP page?

—
Matt Farmer | Blog | Twitter

GPG: CD57 2E26 F60C 0A61 E6D8  FC72 4493 8917 D667 4D07

--
--
Lift, the simply functional web framework: http://liftweb.net
Code: http://github.com/lift
Discussion: http://groups.google.com/group/liftweb
Stuck? Help us help you: https://www.assembla.com/wiki/show/liftweb/Posting_example_code

---
You received this message because you are subscribed to the Google Groups "Lift" group.
To unsubscribe from this group and stop receiving emails from it, send an email to liftweb+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Antonio Salazar Cardozo]

AMP I believe is a Google suggestion for making faster pages on mobile.

What about the lift JS file is incompatible with AMP? 5$3 fact that it isn't marked async?
Thanks,
Antonio

[zaza]

Antonio,

I write a sample project to highlight the errors as soon as I can.

Yes, It should be async. 

Thanks,

Andrea

[zaza]

Antonio,

I have published an example here: https://github.com/zaza81/AMP-test

There is a simple AMP page at /static/amp-sample#development=1

lift.js and /lift/page/XXXXXX.js are loaded right before </body>, but AMP HTML documents cannot include any author-written JavaScript, nor any third-party scripts. Sure I can define the page as stateless, but the point is that I need to load content dynamically.

Thanks,

Andrea

[Peter Petersson]

Hi Andrea

You probably need to relax the security rules in lift boot, take a look at the
CSP rules at LiftRules.securityRules in lift boot or even do a github search about it [1].

On a second note whats up with the html tag in  [2] it has some strange unicode sign in it ?
I would actually fix that first cause I am not sure lifts CSP affects stuff living in /static

[1] https://github.com/search?q=LiftRules.securityRules&type=Code&utf8=%E2%9C%93
[2] https://github.com/zaza81/AMP-test/blob/master/src/main/webapp/static/amp-sample.html

best regards Peter Petersson

--

[zaza]

Hi Peter!

Thanks.
I am trying to create AMP pages: https://www.ampproject.org/learn/about-amp/

The HTML is correct. I am Just wondering how create Dynamic AMP pages, as custom js are not allowed.

Google is ranking a lot better amp pages, so i am trying to translate around 2M pages :-)

A.

[Peter Petersson]

Okey thanks for the link it explains the opening html tag.

So what you are saying is that you are not "allowed" to deploy the AMP
page on google if it contains custom js ?

best regards Peter Petersson

[zaza]

On Saturday, October 29, 2016 at 2:04:58 AM UTC-7, Peter Petersson wrote:

Okey thanks for the link it explains the opening html tag.

So what you are saying is that you are not "allowed" to deploy the AMP
page on google if it contains custom js ?

Yes, a kind of.  With custom Js is not a valid AMP page, so you don't get better ranking in the Google SERP.

AMP are becoming very important to increase organic traffic, I have noticed a significant increase in ranking of AMP Pages in the last months.

I am wondering whether someone else has faced this problem - I cannot see the solution by using Lift snippets.

Thanks for your help Peter!

a.

[Antonio Salazar Cardozo]

Well, net-net, Lift relies on the JS to do certain aspects of state management

like ensuring the functions tied to form fields stay alive on the server. However,

you might be able to respond to renders from a search engine user agent with

a page that doesn't carry that JS, since it's not expected that it will need those

functions, or certain pages that you know don't require that binding stuff. You

can also try reworking your forms not to use function binding.

I'm not sure if this is actually what you're using. If you're not using any server-

side function binding (like anything in SHtml.*), for a given page, you can always

tweak `LiftRules.autoIncludeAjaxCalc` and `LiftRules.javaScriptSettings` to

be false and empty, respectively, for the pages you want. You can do this in an

early function, I believe:

LiftRules.early.append { (request: HTTPRequest) =>

  if (request.uri.contains("/amp/")) {

    LiftRules.autoIncludeAjaxCalc.request.set(() => (_: LiftSession) => false)

    LiftRules.javaScriptSettings.request.set(() => Empty)

  }

}

It may have to be in `LiftRules.onBeginServicing` instead, don't have time to

give it a trial run right this second unfortunately.

Thanks,

Antonio

[zaza]

Antonio,

thanks for your suggestions, but - if I am seeing  your solution - I don't think I can use for my case.

AMP pages are rendered to both end users and search engine bots. 

Restricting to a search engine user agent I think will not solve. 

So, when binding is used to load content, there is not way to avoid Js since it is 

needed to manage the state.

The onIy option I have is to write a script, getting the info from DB and generating static AMP page in a special folder.

Thanks,

Andrea

On Tuesday, November 1, 2016 at 7:13:49 AM UTC-7, Antonio Salazar Cardozo wrote:

Well, net-net, Lift relies on the JS to do certain aspects of state management

like ensuring the functions tied to form fields stay alive on the server. However,

you might be able to respond to renders from a search engine user agent with

a page that doesn't carry that JS, since it's not expected that it will need those

functions, or certain pages that you know don't require that binding stuff. You

can also try reworking your forms not to use function binding.

 

 

I'm not sure if this is actually what you're using. If you're not using any server-

side function binding (like anything in SHtml.*), for a given page, you can always

tweak `LiftRules.autoIncludeAjaxCalc` and `LiftRules.javaScriptSettings` to

be false and empty, respectively, for the pages you want. You can do this in an

early function, I believe:

LiftRules.early.append { (request: HTTPRequest) =>

  if (request.uri.contains("/amp/")) {

    LiftRules.autoIncludeAjaxCalc.request.set(() => (_: LiftSession) => false)

    LiftRules.javaScriptSettings.request.set(() => Empty)

  }

}

It may have to be in `LiftRules.onBeginServicing` instead, don't have time to

give it a trial run right this second unfortunately.

Thanks,

Antonio

The 

[Diego Medina]

Hi,

> The onIy option I have is to write a script, getting the info from DB and generating static AMP page in a special folder.

You can generate a lift page that won't include a js file but at the same time retrieve information from a database, is this what you are trying to do, or what exactly do you want to show on the AMP pages?

Thanks

Diego

--
--
Lift, the simply functional web framework: http://liftweb.net
Code: http://github.com/lift
Discussion: http://groups.google.com/group/liftweb
Stuck? Help us help you: https://www.assembla.com/wiki/show/liftweb/Posting_example_code

---
You received this message because you are subscribed to the Google Groups "Lift" group.

To unsubscribe from this group and stop receiving emails from it, send an email to liftweb+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Diego Medina
Lift/Scala Consultant
di...@fmpwizard.com
http://blog.fmpwizard.com/

[Antonio Salazar Cardozo]

That's not correct, no. Quoting myself:

I'm not sure if this is actually what you're using. If you're not using any server-

side function binding (like anything in SHtml.*), for a given page, you can always

tweak `LiftRules.autoIncludeAjaxCalc` and `LiftRules.javaScriptSettings` to

be false and empty, respectively, for the pages you want. You can do this in an

early function, I believe:

LiftRules.early.append { (request: HTTPRequest) =>

  if (request.uri.contains("/amp/")) {

    LiftRules.autoIncludeAjaxCalc.request.set(() => (_: LiftSession) => false)

    LiftRules.javaScriptSettings.request.set(() => Empty)

  }

}

You can do this just for search engine bots or for all requests. The key is that

you cannot be using server-side function binding. This refers almost exclusively

only to functionality exposed by SHtml (or if you're using some of the more hidden

functionality, S.fmapFunc). Data binding (using CSS selector transforms) that doesn't

bind SHtml form fields works fine.

So, this snippet:

def render = {

  val myBooks = Book.find("publishedAt" -> ("$gt" -> Date.yesterday))

  ".book" #> myBooks.map { book =>

    ".name *" #> book.name & ...

  }

}

Can be rendered on a page that has the JS turned off via the autoAjaxInclude

and javaScriptSettings rules without any issues.

This snippet, however:

def render = {

  ".new-book .name" #> SHtml.text("", newBookName = _) &

  ".new-book .price" #> SHtml.number("", newBookPrice = _) &

  ".new-book type=submit" #> SHtml.onSubmitUnit(() => Book.create(newBookName, newBookPrice))

}

Would not work, because it relies on server-side field binding.

Does that clarify things a bit?

Thanks,

Antonio

[zaza]

Antonio,
I have got it. Nice to hear that!

Thanks for your help, I will make a sample project with AMP pages working, so to share.

a.

[Antonio Salazar Cardozo]

Awesome!

Thanks,

Antonio

[zaza]

Here a simple example: https://github.com/zaza81/AMP-test 

I am generating  a valid AMP page from backend.

I needed to add CalcStateless(() => { LiftRules.javaScriptSettings.request.set(() => () => Empty) to the sitemap to make it work.

Thanks everyone,

Andrea

[Antonio Salazar Cardozo]

Boom! Awesome stuff, thanks for sharing!

Antonio