JSFoo: VueDay 2019

A day spent discussing Vue.js, developments in the Vue ecosystem and component architecture

Tickets

Building Scalable & Reusable Vue Web Apps for Multiple Instances

Submitted by Prateek Jaiswal (@prateek-jaiswal) on Thursday, 8 August 2019

Section: Full talk (40 mins) Technical level: Intermediate Section: Crisp talk (20 mins) Technical level: Intermediate

View proposal in schedule

Abstract

We’ll see how to efficiently build a Web App to serve different countries having varying changes. Utilising Vue’s feature to architect such Scalable & Reusable Web App.

Outline

In this talk, I’ll share how I used Vue’s feature to develop a highly scalable and reusable Web App. We’ll take an example of a web app which need to scale to multiple countries.

  • Following DRY (Don’t repeat yourself) approach with Vue Mixins
  • Maintaining SoC (Separation of concerns) with Vue’s component architecture
  • Rendering Vue components with Dynamic imports
  • Building country wise components with Webpack
  • Using SCSS with Vue to scale style
  • Bonus: Enabling Internationalization

Speaker bio

Frontend Developer at Zeta. I have 4+ years of experience building cutting edge web apps. Founded DoorStepAll.com. Winner of 12th Plan Hackathon at IIT Delhi. Prateekjaiswal.in

Links

Slides

https://drive.google.com/file/d/17IS4ZtjV0aSYE35QCMh1nQbCSOZEhLPe/view

Comments

  • Abhishek Balaji (@booleanbalaji) Reviewer a month ago (edited a month ago)

    Hi Prateek,

    Heres’s some feedback from the reviewers:

    • The code for the mixin (in the last example) seems to be missing.
    • Can this be accomplished using a component instead of mixins?
    • Can dynamic configurations/flags be used instead for country/region specific elements (eg: form fields)?
    • a link to the demo/sample application would be quite useful (hosted on CodeSandbox maybe)
  • Rahul Kadyan (@rahulkadyan) a month ago

    I like the efficient use of tooling here.

    For slides, text density is very high. Try to keep 10-15 words (excluding code samples) per slide.

    And on content, mixins are like double edged swords, it would be better if you address downsides and convey how to carefully make best use of them.

    • Abhishek Balaji (@booleanbalaji) Reviewer a month ago

      Thanks, Rahul. Adding to this,

      It is an interesting topic but not sure the approach being presented is something that people agree with, since mixins are considered an anti-pattern except for very specific use cases. This ties back to the question put here, if the same thing can be achieved using components or any other way?

  • Abhishek Balaji (@booleanbalaji) Reviewer a month ago

    Hi Prateek,

    Based on the reviews, we’re confirming your talk for JSFoo: VueDay. Please upload your slides ASAP. I will be in touch with you over email regarding the next steps.

  • Prateek Jaiswal (@prateek-jaiswal) Proposer a month ago

    Hi Abhishek,

    The Slides have been updated with above suggestions. Will be sharing the demo link in this week.

    • Can this be accomplished using a component instead of mixins?
      It can be accomplished using components but it won’t help in reusability and avoiding duplication. Multiple components, country wise will be a shadow copy with minimal changes hence causing a lot of duplication. Whereas using Mixins, if some parent logic is updated, it’ll update the child logic avoiding re-work and if child logic is different then it can be overridden in child component. Vue’s Mixin becomes best match for this use case.

    • Can dynamic configurations/flags be used instead for country/region specific elements (eg: form fields)?
      We tried dynamic configurations & flags. But it becomes tedious to maintain them. One release can break multiple countries. Also, many elements have minimal changes specific to one country only, it’ll cause multiple copies and difficiult to maintain if logic changes. In case of configurations, it requires maintainance for consistency & backward compatibility.

    • Abhishek Balaji (@booleanbalaji) Reviewer a month ago (edited a month ago)

      Thanks! Some more changes to make before your reherasal:

      • Add a slide after he title to show your bio and some more details + what you do at your current workplace. This helps add context to your problem statement
      • You’ve listed approaches to follow and approachs to avoid. This is comes off as prescriptive to the audience. Have you tried some of these approaches and they’ve not worked for you? If so, you should mention that for each one, since that would be valuable
      • The slides are currently just blocks of code. You’ll need to update your presentation so that there are more details on the slides. The reason here is that when you’re speaking on stage, the audience is trying to balance watching the slides and listening to you speak. The slides should be used to anchor your points, so the audience can follow along with you
      • It would also be useful to show some baseline metrics on what changed after using this approach
      • Abhishek Balaji (@booleanbalaji) Reviewer 28 days ago

        Adding feedback from the rehearsal:

        • Don’t read off the slides
        • Pace of the talk was good
        • Need to reduce the code snippets some more, or add more context around each one
        • Make sure to title each slide with a well defined topic. Refer to topics instead of slides when speaking.
        • Ending of the talk was a bit abrupt. Add some metrics to smoothen out the ending.

        Please share the updated slides by Monday, so we can do a final review before the conference.

Login with Twitter or Google to leave a comment