Web Apps - How to Dynamically Present Announcements

There are a lot of possible solution, all with different degree of difficulty and flexibility:

1. Hardcode everything in your HTML page

It's the easier solution in the short term, but it would become harder and harder as the projects grows. I would not suggest doing this even for smaller projects.

2. Save the list on a committed data source

For example, create a JSON file in your project with the following structure:

[
  { 
    "type": "announcement",
    "date": "2020-08-18",
    "title": "New announcement!",
    "content": "Bla bla bla...",
  },
  { 
    "type": "update",
    "date": "2020-08-18",
    "title": "Version 2.1.0",
    "content": "Here is the changelog: ...",
  },
]

Then your webapp can load this file and render it accordingly. This approach has some advantages:

• You don't need to rewrite all the boilerplate html everytime
• The changes on the update page are committed, so they are easier to review or cancel

However, you still need to insert html in your content field and that could be problematic to do by hand everytime (especially if you need to add images, tables or more complex elements). Also, the changes are in the codebase, so they can not be delegated to a not-technical person (such as the marketing manager).

Also, it is not very efficient to load and parse a json file everytime. You can add some caching, but it's still not as performant as a database

3. Save the list manually in the database

This solution is very similar to number (2). It provides some performance improvement, but most of the other disadvantages remains valid.

4. Use a database and implement a GUI for creating/editing/publishing announcements

The ideal solution is to use a database, while also implementing in the backend a restricted area where it is possible to manage the announcements using a WYSIWYG editor.

Advantages:

• Maximum flexibility and it does not require writing the HTML by hand everytime
• Anyone can write and publish the announcement, it does not have to be a developer

Disadvantages:

• You need to develop the whole editing/publishing system

Basically what you want is a backend that runs a websocket port for clients to bind to. So a client would send his request to post an announcement, this could be via the web socket or any other API( REST, SOAP, GraphQL).

The server can then save the announcements in its Database or/and push update to all the clients attached that an announcement was added through the websocket port. Then the client can handle the response from the server according to its logic.

To fetch announcements for clients which were not connected at the time of announcement via websocket, you can just reply with all the announcements made after a client disconnected.

I don't know whats your programming language or technologies you're using. But, I guess you want a realtime updates and announcement. I'm suggesting you to use realtime databases like FCM to handle it: https://firebase.google.com/docs/cloud-messaging/concept-options?hl=id

In this example, it using NodeJS:

https://thecodebarbarian.com/sending-web-push-notifications-from-node-js.html

It depends upon how you want to handle it. Some use this technique of storing in a database and updating it.

Another approach is that you can simply use a web crawler to import the announcement/notices if you are taking references from another websites and you won't need to create a database too. But, your website will be little bit slow but will save the memory for database.

The standard method for putting text onto webpages without hardcoding it is using a content management system or CMS. This can be big and complex, or simple and lightweight.

The approach I've seen work best is to use a "headless CMS", which gives non-technical people a UI to enter the content, and an API which allows your application to grab that content (e.g. as JSON), and render it in whichever framework you're using. This works for "Announcements", or other text content like FAQs, terms & conditions etc.

Another approach is to use a "static site generator" which takes text in a specific format and spits it out as HTML. You could use this to build a pipeline to take "announcements" written in markdown and committed to Git, which are converted by the static site generator into an HTML snippet, which you then render using your NodeJS application.

As stated before, a CMS (content management system) is probably the way to go. If you haven't decided on how to build your web app, I would strongly advise you to use a web framework.

If you are in search of a good solution I would recommend Django and Django CMS. Both are well documented, open-source and can scale as needed.

Django:

https://docs.djangoproject.com/en/3.1/contents/

Django CMS:

http://docs.django-cms.org/en/latest/