Surat Javascript Meetup

1. EMBARACE JAVASCRIPT

2. TURN MR. ZALAVADIYA

3. AGENDA?
MR. BHAVANI MR. KAWA MR. VIRANI
WHAT? WHY? NEXT?HOW?

4. TURN MR. BHAVANI

5. JAVASCRIPT EVOLUTION

6. TURN MR. KAVA

7. ISOMORPHIC WEB DEVELOPMENT

8. NODE JS WHAT?
Ryan Dahl
Nov 9th, 2009
Jan, 2010

9. NODE JS WHY?

10. NODE JS HOW? ARCHITECTURE

11. NODE JS HOW? SOCKET IO

12. NODE JS HOW? SCALING

13. MONGODB WHAT?
2007 Open Source: Oct 20, 2017

14. MONGODB WHY?

15. Ad Hoc Queries Indexing Replication Load Balancing
GridFS Aggregation
MONGODB WHY? FEATURES
Map Reduce Transaction
Sharding

16. REACTJS WHAT?
Jordan Walke
2011
2012
2013
Mar, 2015
Apr 2019

17. REACT JS WHY? COMPOSITION
Inheritance
(is a)
Composition
(has a)

18. REACT JS WHY? STATEFUL

19. REACT JS WHY? VIRTUAL DOM

21. REACT JS WHY? LIFECYCLE

22. REACT JS WHY? REDUX

23. REACT JS WHY? JSX

24. GRAPHQL WHAT?
Internally, 2012
Publicly, 2015
7th Nov, 2018

25. GRAPHQL WHY? GRAPH

26. GRAPHQL WHY? REST

27. GRAPHQL WHY? UNDER-FETCHING

28. GRAPHQL WHY? OVER-FETCHING

29. GRAPHQL WHY? SCHEMA VALIDATION

30. GRAPHQL
type Post {
title: String!
author: Person!
}
type Person {
name: String!
age: Int!
posts: [Post!]!
}
WHY? EXAMPLE
{
allPersons {
name
}
}
{
"allPersons": [
{
"name": "Leonardo di caprio",
"posts":{
"title": "Climate Change"
}
}
]
}

31. GRAPHQL
mutation {
createPerson(name: "Bob", age: 36) {
name
age
}
}
WHY? EXAMPLE
"createPerson": {
"name": "Bob",
"age": 36,
}

32. GRAPHQL
subscription {
newPerson {
name
age
}
}
WHY? EXAMPLE
{
"newPerson": {
"name": "Jane",
"age": 23
}
}

33. GRAPHQL WHY? EXAMPLE

34. GRAPHQL WHY? RELAY

35. GRAPHQL WHY? RELAY APP

36. GRAPHQL WHY? <Story/>

37. GRAPHQL WHY? <Story/>

38. GRAPHQL WHY? <NewsFeed/>

39. GRAPHQL WHY? <NewsFeed/> Fragment

40. GRAPHQL WHY? <NewsFeed/> Load More

41. GRAPHQL WHY? RELAY COMPONENTS
Relay
Environment
Network Layer <QueryRenderer/>
Fragment
Container
Fragment
Container
Pagination
Container
Mutation Subscription Relay Store fetchQuery

42. GRAPHQL WHY? FINAL WORDS

43. GRAPHQL WHY? CONNECTED DATABASE

44. GRAPHQL WHY? INTEGRATE EXISTING SYSTEM

45. GRAPHQL WHY? CONNECTED + INTEGRATED

46. GRAPHQL WHY? RESOLVER FUNCTION

47. EMBARACE ARCHITECTURE

48. JEST WHAT?
Zero Config Snapshot Testing Isolated Code Coverage Easy Mocking Fast and Safe

49. JEST WHY? SNAPSHOT

50. JEST WHY? SNAPSHOT RESULT

51. JEST WHY? SNAPSHOT RESULT

52. JEST WHY? CODE COVERAGE

53. JEST WHY? MOCKING

54. WEBPACK WHAT?

55. WEBPACK WHY? WEBPACK DEV SERVER

56. BABEL WHAT?
var a = 3
a + 5

57. BABEL WHY?

58. CI / CD WHAT? WHY?

59. THINK HOW TO THINK?

60. TURN MR. VISHAL VIRANI

61. THINK OPEN SOURCE

62. “In the middle of
difficulty lies opportunity.”
~ Albert Einstein

63. QUESTION ANSWER

64. NODE JS: https://en.wikipedia.org/wiki/Node.js
REACT JS: https://en.wikipedia.org/wiki/React_(JavaScript_library)
REACT JS: https://ibmcode-staging.us-east.containers.mybluemix.net/tutorials/wa-react-intro/
RELAY: https://reactjs.org/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html
REDUX: https://redux.js.org/introduction/motivation
MONGO DB: https://en.wikipedia.org/wiki/MongoDB
REACT: https://arkwright.github.io/scaling-react-server-side-rendering.html
Relay: https://code-cartoons.com/a-cartoon-intro-to-facebook-s-relay-part-4-aef7d819a8ed
GRAPH QL: https://en.wikipedia.org/wiki/GraphQL
WEBPACK HMR: https://www.javascriptstuff.com/understanding-hmr/
REFERENCE LIST
BABEL: https://www.sitepoint.com/understanding-asts-building-babel-plugin/
CI / CD: BABEL: https://www.sitepoint.com/understanding-asts-building-babel-plugin/