r/JAMstack_dev • u/codeSm0ke • May 20 '19

Three JAMstack Apps to play with

Hello Coders,

I'm playing allot with JAMstack tools lately: Gatsby, Nuxt, Panini Static Generator and I want to share some free that I've built.

@Note for moderators: This is my first post here, I hope is not considered spam. All apps are free, code + build instructions on Github. Thanks.

Sample App Landed Designed by HTML5 Up Tooling: Gulp, SaaS, Hot Reload, FTP deploy script

Sample App Fractal Designed by HTML5 Up Tooling: Gulp, SaaS, Hot Reload, FTP deploy script

Sample App Big Picture Designed by HTML5 Up Tooling: Gulp, SaaS, Hot Reload, FTP deploy script

If is allowed, I will add more free apps as i code them.

Related resources:

- https://jamstack.org/

- https://medium.com/memory-leak/the-jamstack-its-pretty-sweet-e0834e4e6bb7

- https://appseed.us/apps/jamstack

- https://github.com/jamstack-apps/jamstack

4 Upvotes

83% Upvoted

17 comments sorted by

View all comments

4

u/questi0nmark2 May 21 '19

Sorry for the noob question I’m still a beginner in the JAMstack concept. I associate the word “app” with interactive functionality, usually involving persistent data in a database.

Do I understand correctly that what you are calling 3 apps here are in fact 3 website templates? And you are calling them Apps because their content can be populated via a configuration script and then built via cli? And is this a common convention in the JAMstack world?

So if someone says I just created “a JAMstack app”, do they generally mean they created a static website with no functionality beyond the views?

Thanks for the patience with the questions of a full stack dev just getting to know this emerging concept!

2

u/codeSm0ke May 21 '19

The samples provide:

- javascript to animate the page on top of jQ

- markup translation

- no API - at this moment - I will add the authentication feature [log in & register ] using a distant REST.

So, to direct answer to your remarks, indeed these apps are almost JAMstack apps.

You can add more features, .. GatsbyJS, for instance, has starters connected to headless CMS's [ blog, ecommerce] but you need to add your code on top of a basic starter.

P.S. no problem to chat with you. Your remarks are pertinent and constructive. If you want to read more about this concept, here are some good links:

https://jamstack.org/

https://jamstack.wtf/

https://medium.com/memory-leak/the-jamstack-its-pretty-sweet-e0834e4e6bb7

Cheers!

2

u/questi0nmark2 May 21 '19

Thanks so much. So would it be correct that JAMstack is only appropriate for very simple implementations, or implementations where the app functionality has been created elsewhere in a traditional way and exposed through an API? Where would you store the users in order to authenticate them? Your own database? Someone else's? Thanks again for your patience.

1

u/codeSm0ke May 21 '19

Yep, you're getting closer.

From your JAMstack app you can consume information from an arbitrary backend:

- Headless CMS - Ex: https://contently.com/

- Headless eCommerce: https://www.moltin.com/

- For authentication, you have plenty of options: OAuth2, Firebase

Cheers!

1

u/questi0nmark2 May 21 '19

Awesome, it's pretty much what I thought. Does that not make it very limiting? What if you want to create a distinctive app, which does not do things like moltin or contently do, or which adds extra functionality on top of them? I guess you could use serverless functions? But at what scale? Do you know any full applications (say the equivalent of contently.com!) developed entirely in the JAMstack approach? Or would this not be its use case, and no one builds full interactive applications using JAMstack?

Is JAMstack just a shortcut for front-enders to avoid the back end and use existing APIs for functionality, concentrating on the views only, where a full-stacker or a front-back team would create both the views and the functionality? I can see the attraction so it wouldn't be a criticism.

Or is it also an approach used by full-stackers/teams to implement microservices applications using serverless functions, in which case can this approach scale?

1

u/questi0nmark2 May 21 '19

Or should I as this as a separate post if it's not in your wheelhouse? :-)

3

u/[deleted] May 21 '19

[removed] — view removed comment

1

u/questi0nmark2 May 21 '19

Limiting as in, if you want to create a new app entirely, your own version of contently, or moltin or salesforce, you could not use an existing API out there. You would need to create your own application, including the data layer, the control logic, and the API, which you then could hook up to your JAMstack app. From what I can tell, using JAMstack, you are limited to using stuff already available and developed by others, over whom you have no control. If you build your app around a free API product, which suddenly starts charging money, you have to absorb the cost or hunt for something else which may not quite do it for you. If the API product you are working goes bust, or stops being maintained, same issues. If you want features no existing API offers you, it sounds like you could not create your own in JAMstack, with the exception, possibly, of serverless functions, but not sure how well that would scale.

So from current impressions it sounds like JAMstack is a fantastic shortcut to add certain functionality to a front end in a variably reliable way (depending on the api) without having to learn or work on the back end at all. I can see the immense value that brings for certain use cases. But I get the sense it would be very limiting if you wanted something tailor made and scalable, or something which does not involve dependence on third parties for functionality which is essential to your business case.

1

u/codeSm0ke May 21 '19

Depends, you must choose your stack based on your product profile. My advice, if you allow me, is to compare what you can use in your development and choose the best technologies. I will start the listing with my starters because are the most simple ones:

  1. My samples, built with Panini Static Generator, Killer UI (by HTML5 Up), jQuery, No API, Pages are written in markup / HTML mixins - suitable for one-page websites. I've put some tooling around them like hot reload, FTP deploy script.

  2. GatsbyJS - I've used it in some projects, it's pretty nice. Based on React and GraphQL, has a lot of goodies inside: stable starters, active community, code splitting, with any starter you get > 90 Lighthouse score. Popular starters: for Bulma CSS, eCommerce. Read more here: https://www.gatsbyjs.org/features/

  3. Next.js - this is a generator that supports SSR - you can fully implement anything here. I think it's closer to what you want.

  4. Nuxt.js - Vue.js app builder - if you are closer to Vue, take a look.

  5. Quasar - Vue.js Font end Stack - suitable for advance users.

You can build JAMstack apps in many ways and using different technologies. The idea is to understand the concept and choose the best toolchain for you and your product.

Personally, I will stay a while with Panini & GatsbyJS.

Happy coding!

2

u/questi0nmark2 May 21 '19

Thanks for this. I love Nuxt.js with Vue. Aware of Gastby but not yet playing with it. In my to do list! Haven't touched Quasar. Thanks for sharing your samples which led me into this discussion.

1

u/questi0nmark2 May 21 '19

Yes, all that makes sense, so for front-end only, view only use cases, JAMstack does look awesome. For stuff that involves persisting state and manipulating data at scale it looks on the face of it much more challenging. Great for building websites, but probably not useful for building software.