Loading Video...
Building custom apps using React or Vue
Developer Community Talk
Địa điểm: Mezzanine 500 - 14:00, 13/10/2022 - 14:30, 13/10/2022 (Europe/Brussels) (30 phút)

Building custom apps using React or Vue
Yi Lin
President tại Acero Technologies
President tại Acero Technologies

Yi has been a software engineer for over 20 years. During that time, he has worked at the world's biggest firms (Apple, Amazon) as well as developing products of his own (https://greenbooks.app) and helped many startups design and launch software products.

He started getting involved in ERP projects in 2019 and quickly fell in love with Odoo. He has been working with Odoo for clients in the US and overseas.

He tries to bring innovation in the consumer software industry to enterprise apps to create the best user experience for business users.

LinkedIn: https://www.linkedin.com/in/ylin


One of my clients, Elite Safety Products*, a distributor of PPE pieces of equipment, had a unique need.

While Odoo worked great for their back office for their sales team, Odoo's user interface for Customers, Sales, and Products was too cumbersome and not so intuitive for these specific users. 

For example, when Elite's salespeople talk to customers, they want all information about the customers (invoice aging report, shipment status, analytics) displayed in one place, or when selecting products, they want to see custom price tiers table and real-time status in all warehouses. 

With Odoo, some of this information is either impossible to get or requires wading through lots of information the salesperson doesn't need to see. Also, the salesperson is often not great at using software, so the user interface (UI) needs to be extremely simple.

Here is what the product and customer pages look like:

- Product page: https://share.cleanshot.com/IYJceo
- Customer page: https://share.cleanshot.com/intGQh

There were also some technical learnings. To build this app, we decided we need to use a modern SPA (Single Page App) framework like React or Vue for speed of development, and build a completely independent user interface from Odoo. We came up with a way to easily interface with Odoo using a REST API (which is what these frameworks prefer) instead of the JSON-RPC API that Odoo has, and was able to build the custom app in record time.

We think the key learning is that sometimes, you can unlock tremendous user value by having the flexibility to build whatever user interface you want, by using a REST API as an interface and pick an open-source UI framework of your choosing like React. This allows you to build apps to solve a more specific need for your customer. And by using a framework like React or Vue, you can often build UI much faster than with Odoo's native way of extending its user interface. In short, more flexibility, speed, and customer-fit.

This approach is similar to SAP's Fiori project (https://blogs.sap.com/2017/11/19/sap-fiori-app-implementation-custom-apps/), but with Odoo, it is just so much easier. One more way Odoo has a leg up over SAP. We hope Odoo can promote this usage and provide more support for custom apps in the future by presenting Odoo as a REST backend for these apps.

My audience for my talk is developers, functional experts, and end users.

* Case study of Elite Safety Products: https://www.odoo.com/blog/customer-reviews-6/elite-safety-products-odoo-prepared-for-protection-845

http://www.bistasolutions.com/ </div> ">
Bista Solutions Inc.
https://www.braintec.com </a> </div> ">
braintec
https://www.ever-bs.com </div> ">
Ever Business Solutions S.a.l
https://www.idealisconsulting.com </div> ">
Idealis Consulting
https://www.nalios.be </div> ">
Nalios
https://www.odoo-bs.com </div> ">
OBS Solutions
https://www.plennix.com </div> ">
Plennix Technologies
https://www.rapsodoo.com/ </div> ">
Rapsodoo
https://www.acsone.eu </div> ">
Acsone
http://www.altanmya.net </div> ">
Altanmya - Technology Solutions
https://www.atharvasystem.com </div> ">
Atharva System
https://www.camptocamp.com/ </div> ">
Camptocamp
http://www.dfakto.com </div> ">
Dfakto
https://www.ecoservice.de/page/homepage </div> ">
Ecoservice
http://www.eezee-it.com/ </div> ">
Eezee-it
https://www.fiscalteam.be/ </div> ">
Fiscal Team
https://www.intero-technologies.de/ </div> ">
Intero Technologies GmbH
https://www.al-jawad.ae/ </div> ">
Al Jawad Software house
https://karizma-conseil.com/en/ </div> ">
KARIZMA
https://www.konfoo.com </div> ">
Konfoo
https://www.logicasoft.eu/odoo </div> ">
Logicasoft
http://www.niboo.com </div> ">
Niboo
http://www.noviat.com </div> ">
Noviat
http://www.setuconsulting.com </div> ">
SETU Consulting Services Private Limited
https://www.squareflow.be/ </div> ">
Squareflow
http://www.subteno.com </div> ">
Subteno
https://www.zero.com.al </div> ">
Zero Group
https://www.accomodata.be </div> ">
ACCOMODATA BV
https://agicap.com/en/ </div> ">
Agicap
https://akretion.com/fr </div> ">
Akretion
http://alphasystems.com </div> ">
alphasystems software solutions gmbh
https://www.arkeup.com/erp-odoo </div> ">
ARKEUP
http://www.axxelia.com </div> ">
Axxelia GmbH
https://www.bhc.be </div> ">
BHC
https://binhex.es/ </div> ">
BINHEX
http://www.birtum.com/ </div> ">
Birtum
https://www.bloopark.de </div> ">
bloopark systems GmbH & Co. KG
https://www.bop-alliance.com </div> ">
BOP Alliance
https://www.brainvire.com/ </div> ">
Brainvire Infotech Inc
https://www.captivea.com </div> ">
Captivea USA
http://www.cube48.de </div> ">
cube48 AG
https://www.cybrosys.com </div> ">
Cybrosys Techno Solutions Pvt.Ltd
https://www2.deloitte.com/lu/en.html .html </div> ">
Deloitte Luxembourg
http://www.dgtera.com </div> ">
DGTERA
https://www.digimedio.be/ </div> ">
Digimedio
https://www.dkgroup.fr/solution-odoo-dkgroup </div> ">
DK Digital
https://www.dphi.be/ </div> ">
DPHI
http://www.dynapps.be </div> ">
DynApps NV
http://www.dynapps.be </div> ">
DynApps NV
https://www.emasphere.com/en/?utm_source=odoo_experience&amp;utm_medium=referral&amp;utm_campaign=Odoo-experience_Corpo_Leads-en-be_22_10_12%2F14 </div> ">
EMAsphere
https://estpos.ee/ </div> ">
EST-POS
https://www.ife.de/ </div> ">
IFE GmbH
http://www.eficent.com </div> ">
FORGEFLOW, S.L.
https://hibou.io/ </div> ">
Hibou Corp.
https://www.isabelgroup.eu/ </div> ">
Isabel Group
https://www.itbrasil.com.br/odoo </div> ">
IT Brasil
https://kickandrush.com/ </div> ">
Kick and Rush
http://www.koleos.eu </div> ">
KOLEOS
https://home.kpmg/be/en/home.html </div> ">
KPMG Tax, Legal & Accountancy
http://www.metrum.lu </div> ">
METRUM SA
https://www.mixvoip.com/ </div> ">
Mixvoip srl
http://www.muchconsulting.de </div> ">
much. GmbH
http://www.novobi.com </div> ">
Novobi
https://odoo-community.org </div> ">
Odoo Community Association (OCA)
http://www.odootec.com </div> ">
OdooTec
http://www.omniasolutions.website/ </div> ">
OMNIA SOLUTIONS
https://ovhcloud.com </div> ">
OVH
https://www.packtpub.com/ </div> ">
Packt Publishing
https://www.ps-sa.net </div> ">
Pioneer Solutions
https://plementus.com/ </div> ">
Plementus
https://www.portcities.net/ </div> ">
Port Cities International Limited
http://www.samsa-it.de </div> ">
SAMSA-IT GmbH
https://www.slnee.com </div> ">
SLNEE
https://smart-ltd.co.uk/ </div> ">
Smart Information Technologies Ltd
http://www.sodexis.com </div> ">
Sodexis
http://www.somko.be </div> ">
Somko BV
http://spectrumgroupe.fr </div> ">
Spectrum Groupe
https://www.surekhatech.com/ </div> ">
Surekha Technologies
https://www.targetintegration.com </div> ">
Target Integration
https://www.teamflow.com/ </div> ">
TeamFlow
https://www.vanmoof.com/ </div> ">
VanMoof
https://ventor.tech/ </div> ">
VentorTech
https://weboffice.at </div> ">
Weboffice IT-Service und Marketing GmbH & Co KG
http://www.yds-int.com </div> ">
YDS
http://www.26house.com </div> ">
26HOUSE s.r.o.
http://3rdwave.be </div> ">
3Rd Wave