Info

Open Website
WARNING! Clicking "Open Website" will launch a third-party app, use at your own risk. We do not recommend logging in with your main account.

Testing and Issues

You can test this app and submit issues during the testing period of the Javascript Contest, Stage 1 contest.

Entries with serious issues will not be able to win the contest, but even minor issues might be important for overall results.

Voting

59

Comments

This app uses TDLib/tdweb as an MTProto Layer 105 implementation and works through secure WebSockets. No other third-party libraries are used.

The approach of React-inspired Functional Components written in JSX is taken for the UI design. The app has its own implementation of Virtual DOM with incremental updates which is connected with MTProto by the global state manager inspired by ReactN.

The mingzipped source code is 37 kb.
1
Features list:

— Auth error handling
— Cloud password (2FA) support
— Infinite scroll for chats and messages
— Previously open chats with scroll position are cached
— Sending messages
— Receiving incoming messages
— Updates for: delivery/read message statuses, chat unread counters, pinned chats, online user statuses
— Grouping messages by date, sender and time
— Sticky date separator
— Message content: support for replies, forwarded, emoji-only messages
— Message content: preview for images and emoji-placeholders for stickers
— Message content: support for line breaks and links
— The last open chat persists between app launches
— Various date formats for chats and messages
— The right column for users and groups is partly implemented
You have not added any comments yet...
by rating

Issues

Fair Mammoth Jan 10, 2020 at 02:24
Приложение построено на tdweb, что приводит в большому объему изначально загружаемого кода и медленной работе в целом. Transferred size: 2.6MB. Библиотека используется неправильно – UI отрисовывается только после полной загрузки wasm. В дальнейшем необходимо уделить внимание оптимизации. Использование teact.

Отметим, что на последнем этапе регистрации происходит переадресация на экран с бесконечной загрузкой.

Приложение не полностью соответствует предоставленному дизайну, некоторые кнопки ломаются, заменяясь символами.

Из прочих недостатков:

– Некорректная анимация мартышки;
– Страной по умолчанию выбрана Россия;
– Периодически возникает ошибка 'Invalid code' при верном коде;
– Поиск по странам не реализован;
– При редактировании номера сбрасывается вся информация (страна и номер целиком);
– При обновлении страницы на этапе ввода кода иногда пропадает введённый номер.
– Возможно смешивание историй нескольких чатов при переходе по нескольким чатам подряд.
____________
Upd. Приносим извинения за неточность формулировок. Исходный код реализации teact не был включен в архив, хотя может быть получен с помощью source map работы. Этот же подход использован в другом приложении в рамках конкурса (#1099). Однако основными проблемами работы остаются большой объём изначально загружаемого кода, невысокая скорость и критичный недочёт со смешиванием сообщений из нескольких чатов.

Upd 2. Teact не повлиял на итоговое место работы. Если бы из-за него работа получила штрафные баллы, она оказалась бы на четвёртом месте.
Google Chrome 78.0.3904, macOS 10.15.2
20
Jolly Cobra Jan 10, 2020 at 14:16
Upd. Спасибо за ответ, но я все еще не понимаю, что является причиной «штрафа». Модуль Teact находится внутри основного кода (файл src.d64cd59d.js, строка 406 и далее). Другое приложение (#1099) также сделано нашей командой, и оно отличается только реализацией MTProto, поэтому остальные модули в них совпадают. Я не прикладывал исходную структуру проекта, но исходный код сборки не был обфусцирован (как и было указано в требованиях конкурса), с сохранением sourcemaps. Поясните, пожалуйста, где именно я нарушил условия?
As I see in source code, you use React but name it teact.

From Requirement:

For avoidance of doubt, using UI frameworks such as React and Angular is not allowed.

If I dont right just say it
6
Jolly Cobra Nov 18, 2019 at 19:49
Correct, this is a tiny implementation of React which I developed especially for this contest. No third-party libraries besides Tdweb are used.
Anton Krylov Nov 18, 2019 at 19:47
Cmn react guys)
3
Probably winning solution
2
The main page should load instantly, without locks and spinners.
Opera 64 / Windows 7 Proffesional
2
Jolly Cobra Nov 18, 2019 at 20:33
Correct, that I is an extremely easy solution for the slow first-time loading problem. The user will be present with a phone number form while the API library is loading and compiling. Subsequent loads will be fast, thanks to the Wasm compile cache in browsers. Will add it to the next release.
I see that Shiny Yak's solution here https://contest.com/javascript-web/entry1099 is using the same `teact` lib implementation as you do. Is it just the same person submitting twice?
2
Jolly Cobra Nov 18, 2019 at 20:12
Yes, we submitted two solutions with different MTProto implementations. This one is using Tdweb, another one is using improved GramJS library (which is based on Telethon).
B
There is no ability to enter country manually
Xiaomi Mi8
1
A great job well done! Congrats!
1
B
Messages are not being marked as read
Xiaomi Mi8
Jolly Cobra Nov 18, 2019 at 19:24
That is not fully true. The app does not mark your incoming messages as viewed. If you view your messages in the other app (or if your peer does it) they will be marked as read in this app.
Files sent are shown as %MEDIA_CONTENT% rather than files
Too slow loading wait 15 sec and exit
Jolly Cobra Nov 18, 2019 at 19:28
Do you have the VPN turned on?
Very slow to load (wasm is huge).
Incorrect geolocation or just preselected Russia there.
Doesn't let you clear phone code (you have to look for your country in select above).
There's no autocomplete for country, you just have to scroll and scroll.
The page for entering the phone number the same as in this app https://contest.com/javascript-web/entry1099. There is no possibility to check other pages.
Alexander Sherekin Nov 18, 2019 at 19:36
Enter phone number, go to the second screen with a code entering, click edit, go back to the first screen. Phone number is being reset
Really slowly loading. Logout does not work correctly. If you refresh the page after log out it will download all the resources that you used before. Not secure
Xiaomi notebook pro. Google chrome. Ubuntu 19.10
I entered a long and invalid phone number here's what I got:
Chrome / Mac OS X
Anton Krylov Nov 18, 2019 at 19:40
20 seconds of loading, but UI is very good and also have a lot of nice features. Monkey as png is not really cool and bundle size is more then 8mb
Is this an alert box?
Opera 64 / Windows 7 Proffesional
Also, the monkey does not track input.
Chrome / Mac OS X
Jolly Cobra Nov 18, 2019 at 20:01
This is really weird. It is only happening for me from time to time for the contest.com-hosted version.
You take the react-telegram and delete the unnecessary code. It's amazing. You didn't even waste time and rename functions or somehow try to refactor them.

https://github.com/evgeny-nadymov/telegram-react/blob/d8f4ceba06f4d48b3594469e30c51772d3a06a11/src/Utils/File.js#L1600
Jolly Cobra Nov 20, 2019 at 07:50
I did not take telegram-react and remove the unnecessary code. The FileStore file is the only file that I used from there, which is less that 1 percent of the remaining project code. And yes, I kept it as is, including copyrights. Why would I rename functions? It is open-source, and I even have contributed to it earlier.
Nobody added any issues yet...