Skip to content

More amp-bind examples in separate folder#7127

Merged
dreamofabear merged 8 commits intoampproject:masterfrom
dreamofabear:bind-examples
Jan 27, 2017
Merged

More amp-bind examples in separate folder#7127
dreamofabear merged 8 commits intoampproject:masterfrom
dreamofabear:bind-examples

Conversation

@dreamofabear
Copy link
Copy Markdown

@dreamofabear dreamofabear commented Jan 20, 2017

Partial for #6199.

  • Basic example in basic.amp.html
  • Linked carousels example in carousels.amp.html
  • E-commerce example in ecommerce.amp.html
  • XHR example in xhr.amp.html
  • Sandbox for security review in sandbox.amp.html
  • Performance test case in performance.amp.html

/to @erwinmombay /cc @cramforce @ericlindley-g

@cramforce
Copy link
Copy Markdown
Member

cramforce commented Jan 20, 2017

Just FYI @sebastianbenz @kul3r4

@kul3r4
Copy link
Copy Markdown
Contributor

kul3r4 commented Jan 23, 2017

Thanks, is it too early to start building a sample?

@cramforce
Copy link
Copy Markdown
Member

cramforce commented Jan 23, 2017

@kul3r4 I think it would be perfect timing.
What you can expect at this stage is that

  1. things should generally work
  2. be way too slow
  3. you might discover attributes you can't change via binding but would really like to.

(2) should be fine for building demos. Feedback with respect to (3) would be really helpful.

Do you feel you have everything you need to start building or would a quick meeting be helpful to get you up to speed on our thinking?

cramforce
cramforce requested changes Jan 23, 2017
View reviewed changes
Copy link
Copy Markdown
Member

@cramforce cramforce left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome, where this you get the shirt images?

@dreamofabear
Copy link
Copy Markdown
Author

dreamofabear commented Jan 23, 2017

Oops, good call. Replaced with public domain (Creative Commons CC0) substitute from pixabay.com.

@kul3r4
Copy link
Copy Markdown
Contributor

kul3r4 commented Jan 23, 2017

From a separate conversation, it seems @choumx is already planning to add a sample to ampbyexample, we can work together on that.

@cramforce
Copy link
Copy Markdown
Member

cramforce commented Jan 23, 2017

@kul3r4 getting usage of this and feedback would be tremendously helpful. @choumx being the builder of this, might be the quickest person to get something done, but not the best person to get feedback.

What I'd really, really want to see is a complete product detail module that has

  • an image gallery
  • a color selector
  • a size selector
  • support for availability (some items are sold out)
  • support for varying prices and sales specific to colors

@sebastianbenz
Copy link
Copy Markdown
Contributor

sebastianbenz commented Jan 24, 2017

@cramforce @kul3r4 we can update the existing product sample which already has all the UI components in place.

erwinmombay
erwinmombay reviewed Jan 24, 2017
View reviewed changes
examples/bind/ecommerce.amp.html
}
</style>

<amp-state id="shirts">
Copy link
Copy Markdown
Member

@erwinmombay erwinmombay Jan 24, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i dont think this is allowed in head. this will actually force <head> to auto close

Copy link
Copy Markdown
Author

@dreamofabear dreamofabear Jan 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

erwinmombay
erwinmombay reviewed Jan 24, 2017
View reviewed changes
examples/bind/basic.amp.html Outdated
}
</style>

<amp-state id="myState">
Copy link
Copy Markdown
Member

@erwinmombay erwinmombay Jan 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same issue here. <head> will auto close

Copy link
Copy Markdown
Author

@dreamofabear dreamofabear Jan 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call, fixed.

cramforce
cramforce reviewed Jan 25, 2017
View reviewed changes
examples/bind/basic.amp.html Outdated
</head>

<body>
<amp-state id="myState">
Copy link
Copy Markdown
Member

@cramforce cramforce Jan 25, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call from Erwin to put this out of head. Lets actually switch to always having it at the end in our example. That can actually make quite a difference in terms of the browser getting to the more important bytes quicker.

Copy link
Copy Markdown
Author

@dreamofabear dreamofabear Jan 25, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea, done.

@dreamofabear dreamofabear force-pushed the bind-examples branch 3 times, most recently from 0632242 to abc6326 Compare January 27, 2017 00:33
@dreamofabear dreamofabear mentioned this pull request Jan 27, 2017
Closed
@dreamofabear
Copy link
Copy Markdown
Author

dreamofabear commented Jan 27, 2017

@cramforce Any other comments? The sophisticated e-commerce example you suggest is tracked in ampproject/amp-by-example#557.

@dreamofabear dreamofabear merged commit 4224565 into ampproject:master Jan 27, 2017
@dreamofabear dreamofabear deleted the bind-examples branch January 27, 2017 22:34
jridgewell pushed a commit to jridgewell/amphtml that referenced this pull request Jan 31, 2017
@jridgewell
More amp-bind examples in separate folder (ampproject#7127)
7226898 
* move bind examples to bind/ folder

* add sandbox example

* add ecommerce example

* update titles

* replace shirt images

* move amp-state to <body>

* move <amp-state> to bottom of body

* fix amp-bind validator html and output
torch2424 pushed a commit to torch2424/amphtml that referenced this pull request Feb 14, 2017
@torch2424
More amp-bind examples in separate folder (ampproject#7127)
91753d4 
* move bind examples to bind/ folder

* add sandbox example

* add ecommerce example

* update titles

* replace shirt images

* move amp-state to <body>

* move <amp-state> to bottom of body

* fix amp-bind validator html and output
mrjoro pushed a commit to mrjoro/amphtml that referenced this pull request Apr 28, 2017
@mrjoro
More amp-bind examples in separate folder (ampproject#7127)
bdf6c56 
* move bind examples to bind/ folder

* add sandbox example

* add ecommerce example

* update titles

* replace shirt images

* move amp-state to <body>

* move <amp-state> to bottom of body

* fix amp-bind validator html and output
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cramforce cramforce cramforce approved these changes

@erwinmombay erwinmombay erwinmombay approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@dreamofabear @cramforce @kul3r4 @sebastianbenz @erwinmombay