6 ms·

Building a Cross-Platform Web and Mobile App from the Ground Up

126 points by mfburnett 5y ago

theanirudh 5y ago
This talk at Nextjs Conf explores cross platform solutions for common issues like routing, styling and animation. Found it to be quite helpful! https://youtu.be/0lnbdRweJtA https://youtu.be/0lnbdRweJtA
- brishin 5y ago
  Would also recommended this talk! It highlights some key libraries bridging these two (Next.js/ React Native) opinionated libraries together.
jrubinovitz 5y ago
> On mobile, we generate a QR code that can be scanned by a phone running the Ambrook app to download and run the latest Javascript bundle live on the phone. This is awesome!
- brishin 5y ago
  Thanks jrubinovitz! We tried to make it as easy as possible to do the right thing (QA + code review at once).
  - jrubinovitz 5y ago
    That's so important when you're shipping at startup speed and it's so tempting to just rush to the next thing. I am going to try this with my next cross platform app.
parthi 5y ago
We do something similar across a React and a Next JS app. A little different because they are both web, but same principles of letting the clients do their own thing and having common backend logic. Also just started looking around your site. This is actually a quality engineering blog! We're actively implementing stylized components in a manner similar to yours.
- brishin 5y ago
  Yes very similar, thanks for the reminder. So it’s four platforms in the end (Browser, Backend/Node, Android, iOS).
gailees 5y ago
Do farmers really use apps?
- iamstupidsimple 5y ago
  Of course, why wouldn't they use the latest stuff? Farming technology is literally the reason you and your (relatively) recent ancestors aren't slaving away in the fields. Doesn't matter if that's combine harvesters or logistics apps.
- kwertyoowiyop 5y ago
  Hopefully you are joking. Farming was high-tech before a lot of other professions were.
- fouc 5y ago
  Farmers are business owners. They definitely use Excel or other computer apps to keep on top of everything.
- cercatrova 5y ago
  Better than using Excel which is what many currently use.
TeeWEE 5y ago
Cool. but I miss a link to the demo ;-)
cudgy 5y ago
How is this “from the ground up”? It basically uses the same web technologies and back end from the existing web solutions. Also, I missed the challenges of handling offline usage which was stated as a requirement, but the back end appears to be GraphQL queries to a server?
- thih9 5y ago
  I guess it's "from the ground up" as in "greenfield", where there's no preexisting code to support or rewrite. I.e. "ground" means "fresh project" (and not e.g. entering bits by hand).
- japhib 5y ago
  Yeah, I saw the headline and was hoping it was something crazy like Rust compiled for mobile and wasm
philprx 5y ago
For those who have the pleasure and luxury to go green field new dev, i started using the Quasar Framework, which builds on top of Vue. I really love it. https://quasar.dev/ https://quasar.dev/
- 02020202 5y ago
- thih9 5y ago
  For those unfamiliar: > Quasar’s motto is: write code once and simultaneously deploy it as a website, a Mobile App and/or an Electron App. Yes, one codebase for all of them (...) source: https://quasar.dev/introduction-to-quasar#what-is-quasar https://quasar.dev/introduction-to-quasar#what-is-quasar
marstall 5y ago
also possible to share (nearly) 100% of code between mobile+web using react-native-web (plug: I did this, save a small iOS shim, for my music player https://shelf.fm https://shelf.fm).
robertlagrant 5y ago
> the opportunity to approach the challenge of supporting multiple platforms without the constraints of legacy engineering decisions While I am keen on this article, I must pause reading it to come here and plead that people say "prior" instead of "legacy". Legacy - due to its provenance in Microsoft sales techniques to mean "not Microsoft" - implies "bad". When actually the decisions may have been good, at least at the time.
rajeevn 5y ago
Was flutter considered a candidate for the technical solution.
- dvh 5y ago
  Too high risk of it being cancelled soon
  - mad_tortoise 5y ago
    What risk is that exactly? Dart and Flutter are one of the fastest growing languages and frameworks around.
    - CraigJPerry 5y ago
      https://killedbygoogle.com/ https://killedbygoogle.com/
      - mad_tortoise 5y ago
        This is one of the most pathetic answers possible. You give nothing on user bases and adoption of both dart and flutter, internal adoption within google, it's use of Dart and Flutter for the frontend of Fuschia, googles desire to control a widespread language, the open-source nature of Flutter, the list goes on. You just provide a list of PRODUCT's that have been killed off, not an entire language and frameworks. Your idea that google will just kill it off is a meme, and doesn't take into account it's usefulness to google in the wider world.
        CraigJPerry 5y ago
        Firstly, chill out :-) In terms of user bases, Orkut (RIP) had north of 60 million users when Google killed it. It was the primary social network in multiple countries. Maybe the biggest user base killed off was Google Reader (RIP), it was the world's foremost RSS aggregator with no forseable competition and no obvious exact replacement for all those users to go to when GReader was turned off. In terms of languages and frameworks, the Noop language was killed more by Kotlin than by Google but Google App Engine has been crushed even if the name lives on, the old SDKs you relied on are mostly gone. There all alternatives, but not quite as attractive. Lastly though, that page i linked has a LOT of examples on it. I feel that adds weight. Hopefully this longer comment goes some way to assuage the idea that my prior comment was a thoughtless throwaway. All the best,
grigg 5y ago
Loved this

126 points by mfburnett 5y ago

This talk at Nextjs Conf explores cross platform solutions for common issues like routing, styling and animation. Found it to be quite helpful! https://youtu.be/0lnbdRweJtA https://youtu.be/0lnbdRweJtA

brishin 5y ago
Would also recommended this talk! It highlights some key libraries bridging these two (Next.js/ React Native) opinionated libraries together.

jrubinovitz 5y ago

> On mobile, we generate a QR code that can be scanned by a phone running the Ambrook app to download and run the latest Javascript bundle live on the phone. This is awesome!

brishin 5y ago
Thanks jrubinovitz! We tried to make it as easy as possible to do the right thing (QA + code review at once).
- jrubinovitz 5y ago
  That's so important when you're shipping at startup speed and it's so tempting to just rush to the next thing. I am going to try this with my next cross platform app.

parthi 5y ago

We do something similar across a React and a Next JS app. A little different because they are both web, but same principles of letting the clients do their own thing and having common backend logic. Also just started looking around your site. This is actually a quality engineering blog! We're actively implementing stylized components in a manner similar to yours.

brishin 5y ago
Yes very similar, thanks for the reminder. So it’s four platforms in the end (Browser, Backend/Node, Android, iOS).

gailees 5y ago

Do farmers really use apps?

iamstupidsimple 5y ago
Of course, why wouldn't they use the latest stuff? Farming technology is literally the reason you and your (relatively) recent ancestors aren't slaving away in the fields. Doesn't matter if that's combine harvesters or logistics apps.
kwertyoowiyop 5y ago
Hopefully you are joking. Farming was high-tech before a lot of other professions were.
fouc 5y ago
Farmers are business owners. They definitely use Excel or other computer apps to keep on top of everything.
cercatrova 5y ago
Better than using Excel which is what many currently use.

TeeWEE 5y ago

Cool. but I miss a link to the demo ;-)

cudgy 5y ago

How is this “from the ground up”? It basically uses the same web technologies and back end from the existing web solutions. Also, I missed the challenges of handling offline usage which was stated as a requirement, but the back end appears to be GraphQL queries to a server?

thih9 5y ago
I guess it's "from the ground up" as in "greenfield", where there's no preexisting code to support or rewrite. I.e. "ground" means "fresh project" (and not e.g. entering bits by hand).
japhib 5y ago
Yeah, I saw the headline and was hoping it was something crazy like Rust compiled for mobile and wasm

philprx 5y ago

For those who have the pleasure and luxury to go green field new dev, i started using the Quasar Framework, which builds on top of Vue. I really love it. https://quasar.dev/ https://quasar.dev/

02020202 5y ago
thih9 5y ago
For those unfamiliar: > Quasar’s motto is: write code once and simultaneously deploy it as a website, a Mobile App and/or an Electron App. Yes, one codebase for all of them (...) source: https://quasar.dev/introduction-to-quasar#what-is-quasar https://quasar.dev/introduction-to-quasar#what-is-quasar

marstall 5y ago

also possible to share (nearly) 100% of code between mobile+web using react-native-web (plug: I did this, save a small iOS shim, for my music player https://shelf.fm https://shelf.fm).

robertlagrant 5y ago

> the opportunity to approach the challenge of supporting multiple platforms without the constraints of legacy engineering decisions While I am keen on this article, I must pause reading it to come here and plead that people say "prior" instead of "legacy". Legacy - due to its provenance in Microsoft sales techniques to mean "not Microsoft" - implies "bad". When actually the decisions may have been good, at least at the time.

rajeevn 5y ago

Was flutter considered a candidate for the technical solution.

dvh 5y ago
Too high risk of it being cancelled soon
- mad_tortoise 5y ago
  What risk is that exactly? Dart and Flutter are one of the fastest growing languages and frameworks around.
  - CraigJPerry 5y ago
    https://killedbygoogle.com/ https://killedbygoogle.com/
    - mad_tortoise 5y ago
      This is one of the most pathetic answers possible. You give nothing on user bases and adoption of both dart and flutter, internal adoption within google, it's use of Dart and Flutter for the frontend of Fuschia, googles desire to control a widespread language, the open-source nature of Flutter, the list goes on. You just provide a list of PRODUCT's that have been killed off, not an entire language and frameworks. Your idea that google will just kill it off is a meme, and doesn't take into account it's usefulness to google in the wider world.
      - CraigJPerry 5y ago
        Firstly, chill out :-) In terms of user bases, Orkut (RIP) had north of 60 million users when Google killed it. It was the primary social network in multiple countries. Maybe the biggest user base killed off was Google Reader (RIP), it was the world's foremost RSS aggregator with no forseable competition and no obvious exact replacement for all those users to go to when GReader was turned off. In terms of languages and frameworks, the Noop language was killed more by Kotlin than by Google but Google App Engine has been crushed even if the name lives on, the old SDKs you relied on are mostly gone. There all alternatives, but not quite as attractive. Lastly though, that page i linked has a LOT of examples on it. I feel that adds weight. Hopefully this longer comment goes some way to assuage the idea that my prior comment was a thoughtless throwaway. All the best,

grigg 5y ago

Loved this