Angular and React Tech Hangout

1. NeoGames

2. 2

3. 3
What’s in it?
• Who are we?
• Front End Platform
• Large scale application design – case study
• Understand your business

4. 4
Who are we?

5. 5
Our Lottery Partners

6. 6
What is our solution?
Front End Widgets Platform

7. 7
JavaScript based framework

8. 8

9. 9
<script src="https://neogames.com/mwc-app.js"></script>

10. 10
Single Sign-on

11. 11
And more…
• More than 50 brands
• Games providers HUB for more than 400 games
• More than 30 deposit options
• Many regulation requirements
• Multi languages, Multi currency support

12. 12
And more…
• Customizations per customer
• Draw based games
• Purchasing tickets for draws
• Bonuses management
https://neofun.neogames.com

13. 13
Let’s Talk Architecture

14. 14
Application high level architecture
Application
Data
GeneralServices
Business Modules
Network
Layered Architecture and data
flow
Adapter AdapterAdapter

15. 15
Inside a module
Controller as view model only
Full separation of View and Logic

16. 16

17. 17
Can you name elements in your
application that requires
customization ?

18. 18
Customizations
Brand CSS
Brandedimages

19. 19
Customizations

20. 20

21. 21

22. 22
Like

23. 23
Can you name a part in your application that
requires breaking the main flows for
customization? How do you return to the main
flow?

24. 24

25. 25
Application high level architecture
Application
Data
GeneralServices
Business Modules
Network
Adapter AdapterAdapter
Customization
Configuration
Specific
directives
Specific implementation

26. 26
To Summarize customizations
• Coloring layout and basic views
• Behavioral customizations
• Use flags – but not too much.
• Use CMS like configurations on strategic places
• Use Flows Hooks - when specific flow required.

27. 27
What is
responsive UI?

28. 28
Responsive UX

29. 29
Handle UX according to the browser
capabilities and not according to the
browser type
How will you define responsive UI

30. 30
Two main approaches
• Bootstrap and CSS based decisions Usually media
• Views separation
https://neofun.neogames.com

31. 31
DBG module HLD
Data
Model
BL
service
Large
Screen
Controller
Small
Screen
Controller
Large
Screen
Template
Small
Screen
Template

32. 32
How to identify none
responsive code?
If(device =…)
If(browser =…)
If(isMobile / isWeb)
If(Vendor=)

33. 33
Responsive
should look like:
If(screenWidth/height =… )
If(isTouch =…)
If(storageSupported)
Etc..

34. 34
Summarize responsive behaviors
• Use capability and not device
• Use standard approaches as much as you can
• Split code and UX behaviors only in extreme cases

35. 35
Understand the Business
• Implementing a feature is easy.
• Maintaining a feature is problematic.
• Don’t ask “If” I can make it work.
• Ask “How” will it keep working with my next changes.

36. 36
Understand the Business
• Aim your designs to support the business needs
• Performance based?
• Large scale application?
• Reliability level?
• Time to market?

37. Thank you!