#PHOENIX LIVEVIEW HOOKS INSTALL#
Install reactor: pip install django-reactor
![phoenix liveview hooks phoenix liveview hooks](https://elixirforum.com/uploads/default/optimized/3X/7/e/7eca4f3bd6c245f483411d2d9649481604bde2dd_2_1380x550.png)
But also has some advantages, as everything is server side rendered the interface comes already with meaningful information in the first request response, you can use all the power of Django template without limitations, if connection is lost or a component crashes, the front-end will have enough information to rebuild their state in the last good known state. This method has its drawbacks because if connection is lost to the server the components in the front-end go busted until connection is re-established. This is no replacement for VueJS or ReactJS, or any JavaScript but it will allow you use all the potential of Django to create interactive front-ends. We only handle sightings additions and we don’t even store them on a database nor broadcast it to all users.Reactor enables you to do something similar to Phoenix framework LiveView using Django Channels.
![phoenix liveview hooks phoenix liveview hooks](https://a4word.com/assets/blog/empex-2019-liveview/liveview_login_rendering.png)
![phoenix liveview hooks phoenix liveview hooks](https://curiosum.com/images/open_graph/cover-f7c908efed7c776e13f582e5f721d137.png)
Properly store and broadcast sightings creation, updates and deletions? Meaning that if the script is loaded after, the handleEvent function that creates markers won’t have access to the map and as such it will fail and won’t render the markers! The problem here is that the Google Map script might be rendered before or after we call that pushEvent. One might think “this seems very easy, on the first mount we could send / schedule a pushEvent !”.
#PHOENIX LIVEVIEW HOOKS HOW TO#
How to display on the map the already stored sightings? There are a few points that we will probably address in another article: We had to cut some corners for the sake of keeping the article focused on topic.
#PHOENIX LIVEVIEW HOOKS CODE#
If you apply all the changes and run the code you should now be able to randomly create markers on your map. # Longitude ranges between -180 and 180 degrees, inclusive # Latitude ranges between -90 and 90 degrees, inclusive. */Įxports.map = new (document.getElementById("map"), * Optional: Makes the sample page fill the window. * Always set the map height explicitly to define the size of the div The Maps JavaScript API lets you customise maps with your own content and imagery for display on web pages and mobile devices.įor you to get up and running, and have a page that displays a map centered in Sydney, you just need to do the following: Once again according to the documentation: Once the state changes, LiveView will re-render the relevant parts of its HTML template and push it to the browser, (…) LiveView does the hard work of tracking changes and sending the relevant diffs to the browser. The LiveView programming model is declarative: instead of saying “once event X happens, change Y on the page”, events in LiveView are regular messages which may cause changes to its state. LiveView provides rich, real-time user experiences with server-rendered HTML. We are assuming that you are familiar with Elixir and Phoenix. Understanding the technology ?īefore digging into the problem, let’s take a look at the technologies we are using. For example, we wanted administrators of the platform to be able to see, on a map, the sightings that the users of the app were reporting on certain places, as they happen. We have been building a platform where using LiveView made a lot of sense, since we wanted some of our features to use an interface that could be updated in real-time. And as soon as LiveView was announced, we could not wait to use it! Howdy dear reader ??, hope you are safe and healthy during these troubled times.ĭuring the past 3 years, we have developed a few projects using the Phoenix Framework for Elixir.