This document discusses cross-framework communication on frontend projects. It outlines the value in working with multiple frameworks, including being able to work with new features and smoothly migrate code. The speaker then discusses challenges in replacing an entire project at once due to complexity, resources, and dependencies. The solution presented is a gradual migration process, integrating new features built with a new framework directly into the existing application and moving simpler pages first. This approach allows for testing and feedback during the transition before a full switch to the new framework.

1. Cross-framework
communication
on frontend

2. OR

3. How to make clients
and users of enterprise
projects happy

4. Grygorii Gavaleshko
I’m a Frontend Technical Leader on one of our enterprise projects.
Working in IT from 2009.
Was working so far in 4 countries on 8+ different projects.
You can check for more here: gavaleshko.org.ua

5. Agenda

6. Agenda
- Value

7. Agenda
- Value
- Project lifecycle

8. Agenda
- Value
- Project lifecycle
- Problem && Solution

9. Agenda
- Value
- Project lifecycle
- Problem && Solution
- Demo

10. Agenda
- Value
- Project lifecycle
- Problem && Solution
- Demo
- Real project examples

11. Agenda
- Value
- Project lifecycle
- Problem && Solution
- Demo
- Real project examples
- Summary

12. Agenda
- Value
- Project lifecycle
- Problem && Solution
- Demo
- Real project examples
- Summary
- Questions

13. Value

14. Value
- Work with more than one frontend framework

15. Value
- Work with more than one frontend framework
- Experience that help you provide valuable solution for client

16. Value
- Work with more than one frontend framework
- Experience that help you provide valuable solution for client
- Smooth code migration

17. Value
- Work with more than one frontend framework
- Experience that help you provide valuable solution for client
- Smooth code migration
- Early beta-features testing

18. Value
- Work with more than one frontend framework
- Experience that help you provide valuable solution for client
- Smooth code migration
- Early beta-features testing
- Project lifecycle

19. Value
- Work with more than one frontend framework
- Experience that help you provide valuable solution for client
- Smooth code migration
- Early beta-features testing
- Project lifecycle
- How mango is growing
- …

20. Project lifecycle

21. Project lifecycle
Initiating process

22. Project lifecycle
Planning process

23. Project lifecycle
Executing process

24. Project lifecycle
Initiating process - now for new cycle
Why?

25. Project lifecycle
Initiating process - now for new cycle
- Project is growing

26. Project lifecycle
Initiating process - now for new cycle
- Project is growing
- Change of core concepts

27. Project lifecycle
Initiating process - now for new cycle
- Project is growing
- Change of core concepts
- New features

28. Project lifecycle
Initiating process - now for new cycle
- Project is growing
- Change of core concepts
- New features
- …
Then you need to start from the beginning

29. Project lifecycle
Initiating process - now for new cycle

30. Problem &&
solution

31. Problem && solution
There is no way to replace at once everything was was working for
a years

32. Problem && solution
Reasons:

33. Problem && solution
Reasons:
- Project complexity

34. Problem && solution
Reasons:
- Project complexity
- Lack of resources (people, money, management)

35. Problem && solution
Reasons:
- Project complexity
- Lack of resources (people, money, management)
- Third-party dependencies (projects, people, tools, technologies)

36. Problem && solution
Reasons:
- Project complexity
- Lack of resources (people, money, management)
- Third-party dependencies (projects, people, tools, technologies)
- …

37. Problem && solution
Solution is in migration process/phase

38. Problem && solution
What we decided to make it smooth:

39. Problem && solution
What we decided to make it smooth:
- Integrate features (written using new framework) directly in
application

40. Problem && solution
What we decided to make it smooth:
- Integrate features (written using new framework) directly in
application
- Convert old features/pages into features opened in <iframe>

41. Problem && solution
What we decided to make it smooth:
- Integrate features (written using new framework) directly in
application
- Convert old features/pages into features opened in <iframe>
- Move simple pages first (on standalone new site)

42. Problem && solution
User advantages:

43. Problem && solution
User advantages:
- This approach allow them to start working with new changes
right now (UX and feature behavior) and even start proposing
improvements, provide valuable feedback

44. Problem && solution
User advantages:
- This approach allow them to start working with new changes
right now (UX and feature behavior) and even start proposing
improvements
- This will help to be familiar with everything in the moment of full
switch from old to new site

45. Problem && solution
Development advantages:

46. Problem && solution
Development advantages:
- We have enough time to check if everything is working as
expected (acceptance criteria)

47. Problem && solution
Development advantages:
- We have enough time to check if everything is working as
expected (acceptance criteria)
- We can test enough before the switch (from user perspective, if
this is update he was actually waiting for)

48. Problem && solution
Development advantages:
- We have enough time to check if everything is working as
expected (acceptance criteria)
- We can test enough before the switch (from user perspective, if
this is update he was actually waiting for)
- We can check if new technology covering all needs

49. Problem && solution
As result:

50. Problem && solution
As result:
- User/developer is working in framework-mixed environment

51. Problem && solution
As result:
- User/developer is working in framework-mixed environment
- We have enough time to test standalone application as it is
developed in background

52. Problem && solution
As result:
- User/developer is working in framework-mixed environment
- We have enough time to test standalone application as it is
developed in background
- In the end one small switch is refreshing old framework with
new one with minor influence to the user

53. Problem && solution
Using selected approach there is no matter what was the old
frontend technology and what will be the new one.

54. Problem && solution
We created a tool which is called trainmanjs. It is a public package in npm
repository And as you can see in the package description – it is a wrapper
on native window.postMessage functionality.

55. Problem && solution
Our project plan is:

56. Problem && solution
Our project plan is:
- move features which were pages to be dialogs (client request)

57. Problem && solution
Our project plan is:
- move features which were pages to be dialogs (client request)
- move simple pages into new stack

58. Problem && solution
Our project plan is:
- move features which were pages to be dialogs (client request)
- move simple pages into new stack
- some components needs to be integrated directly into old application

59. Problem && solution
To solve 1st case:
- move features which were pages to be dialogs
(they are the forms with complicated fields/functionality which are used to create new objects)
We inserted iframe into old stack and it contains new standalone ReactJS
application

60. Problem && solution
When we are going to open new dialogs from old stack the flow is next:

61. Problem && solution
When we are going to open new dialogs from old stack the flow is next:
1. -> Using the tool we are sending a message to iframe (new
application) with the old route string

62. Problem && solution
When we are going to open new dialogs from old stack the flow is next:
1. -> Using the tool we are sending a message to iframe (new
application) with the old route string
2. <- If requested route (mapping of old to new) in router is registered
then we are rendering it and sending success (or error) message back

63. Problem && solution
When we are going to open new dialogs from old stack the flow is next:
1. -> Using the tool we are sending a message to iframe (new
application) with the old route string
2. <- If requested route (mapping of old to new) in router is registered
then we are rendering it and sending success (or error) message back
3. Old stack received confirmation and then is opening iframe which
contains rendered feature which was requested
(or showing error if route was not found – this should not happen as mapping should be done correctly)

64. Problem && solution
When we are going to open new dialogs from old stack the flow is next:
4. -> When we are closing iframe message is sent again into new stack.
It is used to render some empty page
(to stop processing any actions in iframe) and clearing the information in our new application data Store (if
needed)

65. Problem && solution
This was the flow for initial dialogs rendering – just show the form.

66. Problem && solution
If user is filling all the data and clicking button to create the object then
in case of error – we are showing it in iframe and if object was
successfully created then previous flow is extended with next steps:

67. Problem && solution
If user is filling all the data and clicking button to create the object then
in case of error – we are showing it in iframe and if object was
successfully created then previous flow is extended with next steps:
- <- After successful creation we are sending new message with created
object details (only which are needed) to old app

68. Problem && solution
If user is filling all the data and clicking button to create the object then
in case of error – we are showing it in iframe and if object was
successfully created then previous flow is extended with next steps:
- <- After successful creation we are sending new message with created
object details (only which are needed)
- Then old site when receiving such message is showing notification
component with the details from message (name, etc.)

69. Problem && solution
To solve 2nd case:
- move simple pages into new stack
Nothing special was done, only redirection from old stack application to
new stack (only few API endpoints were needed to be rewritten to use
new version of API).
This is not a problem for a user as there is already redirection between
old frameworks. So in the end we’ll replace two old frameworks.

70. Problem && solution
To solve 3rd case:
- some components needs to be integrated directly into old
application
(this is list of objects from database that can be dragged to content part or edited/duplicated/deleted directly
from component, has filtering and sorting)

71. Problem && solution
To solve 3rd case:
- some components needs to be integrated directly into old
application
- We added our ReactJS application as an npm package dependency to
the old project (both of them)

72. Problem && solution
To solve 3rd case:
- some components needs to be integrated directly into old
application
- We added our ReactJS application as an npm package dependency to
the old project (both of them)
- And mounted ReactJS component directly. Communication for actions
in component was implemented in the same way as for Case 1
(for example opening already created objects for editing)

73. Problem && solution
To solve 3rd case:
- some components needs to be integrated directly into old
application
What specific is here?

74. Problem && solution
To solve 3rd case:
- some components needs to be integrated directly into old
application
This is check where ReactJS application is running. If as a library in old
stack, then on the same action we were executing post message and
repeat the flow from Case 1 and if inside native framework then just
usual flow for opening component on page.

75. Demo

76. Demo
Show simple project written on JavaScript which is communicating with
boilerplate/template application on React to demonstrate the idea of
communication.
Do not forget to show code!

77. Real project
examples

78. Real project examples
There is still no confirmation from client about ability to present this.
But I can quickly show you on my local PC how it looks like.

79. Summary
- Work with more than one frontend framework
- Experience that help you provide valuable solution for client
- Smooth code migration
- Early beta-features testing
- Project lifecycle
- Now we know how mango is growing
- …

80. Questions

81. Thank you

83. See you on our next
meeting in
June!
7 / 06 / 2018